THIS LAYOUT HAS BEEN WORKED OUT PRIMARILY FOR SMALL SCREEN DISPLAY.
The playlist pops up, and have been paired with a script where the button shifts on-click.
The script has also programmed clicking anywhere in the window which makes the button disappear.
alternative LIST on page - comments within the single list item

---

JS script
2 scripts:
The pop-up playlist has been taken from a drop-down menu script.
"js/on_off.js" styles the on-click states of the button
var buttonstate=0; function dropbtn(element) { buttonstate= 1 - buttonstate; var blabel, bcolor; { blabel="playlist"; bcolor="#e8e8f4"; width="50px"; /* /////////// after-click state /////// */ } var child=element.firstChild; child.style.color=bcolor; child.style.width=width; child.innerHTML=blabel; }

"js/show_playliste.js" must be placed in the bottom of the page


// Get the button, and when the user clicks on it, execute myFunction document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

The button script "menu_style/pages_style_playlist.css" contains playlist stylings.

The css
.container {width: auto; margin-left:75px; } .container-front {width: auto; margin-left:90px; } .headingposition { text-indent: 100px; position:fixed; top:5px; left: 90px; font-size: 165%; font-variant: small-caps; font-weight: bold; letter-spacing: 2px; color: #660009; } h4 { font-size: 20; font-variant: small-caps; letter-spacing: 7px; text-align: center; } /* ////////////////// insertion of block player items ///////////////////// */ .playerposition { position:fixed; top:40px; left: 90px; } #nav { line-height:30px; padding:5px; } /* ///// div determines position of player and if text width for text block /////////// */ #section { float: left; padding:10px; } /* //////////// layout PLAYLIST (background=border padding = border thickness) width ///////// */ /* a link (top of sheet) sets color of link in playlist */ .playlist_place { position:fixed; top:133px; left: 90px; } #playlist{list-style-type:none; background: #a30008 url("grafik/bckgr_piece.jpg"); /*determines bggroundcolor and bordercolor of playlist */ /*border: 1px solid grey;*/ width:280px; padding:6px; /* border thickness */ font-size: 12px;} /* playlist font-size */ #playlist_li {list-style-type:none; background: #abd;} /* sets bgground color for active link in playlist */ #playlist li#headline {background:#7b0008;text-align:center; font-size:1.0em; color: #c5bcbc;} #playlist_li active a{color:#e33;background: #ae7;padding:2px;display:block;} /* //////////// layout PLAYER + PLAYLIST (background=border padding = border thickness) width ///////// */ .active a{color:#beb58e; text-decoration:none; font-weight:bold; font-variant: small-caps;font-size: 10pt;} /* color of active link - section/li moves to the right if taken out */ li a:hover{text-decoration:none; } /* //////////// show - hide buttons /////////////////// */ input.btn {background: #696767; color: #d8d6d6; font: bold 'trebuchet ms',helvetica,sans-serif; font-size:1.2em; border:1px solid gray; border-radius: 35px; } /* placering show */ .showlink { position:fixed; top:87px; left:87px; } /* placering hide */ .hidelink { position:fixed; top:87px; left: 345px; } /* //////////// click click button /////////////////// */ /* button {border:0px; } */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; } .show {display:block;} .dropbtn { width:65px; /* ///// default size of button ///// size of text go to .onoff div ////// */ height:21px; /*padding:2px 3px 10px 2px; */ /* //// moves the content around: 1 top, 2 right, 3 bottom, 4 left //// */ font-size:12px; background:#a50008; /* background border dark brown a63e3e, medium grey bdb9b9, light green 9af2a4, tyrkis 5af3f1 */ border-radius: 38px; } .dropbtn div { width:45px; /* ////// default ///// fix size to fit text ///// */ height:18px; min-height:18px; /*background:#7c7349;*/ overflow:hidden; /*border-top:1px #d05151; /* /////////// inner button /////// border-right:1px solid white; border-bottom:1px #d05151; border-left:1px solid gray; */ margin:0 auto; xpadding-top:4px; color:#e8e8f4; /* default color when called */ text-align:center; border-radius: 38px; /* /////// default, keeps design when clicked //// */ } .dropbtn:hover, .dropbtn:focus { /* /////////// border color hover ////////// */ background-color: #750107;