Ap Dropdown
Do NOT use this HTML files if you want to use this in your website. Please read the information on GitHub page https://github.com/aprsn/ApDropdown
by aprsn
HTML
<html>
<head>
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/7e015ed479/UntitledProject/style.css">
<link rel="stylesheet" href="./css/ap-dropdown.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="ap-dropdown default" dropdown-name="dropdown1" status="close">
<div class="head">
<a class="title" target-dropdown="dropdown1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe velit
deleniti omnis fuga quas labore obcaecati voluptas? Sit consequuntur
vitae nihil vero beatae sequi incidunt velit, odio esse maxime dolore.
</a>
</div>
<div class="menu">
<ul>
<li>Item 1</li>
<li class="selected">Item 2</li>
<li>
It'a a very long item for responsive test. So, you can see what
happens when the screen size is small.
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
<br><br>
<div class="ap-dropdown primary" dropdown-name="dropdown2" status="close">
<div class="head">
<a class="title" target-dropdown="dropdown2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe velit
deleniti omnis fuga quas labore obcaecati voluptas? Sit consequuntur
vitae nihil vero beatae sequi incidunt velit, odio esse maxime dolore.
</a>
</div>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
It'a a very long item for responsive test. So, you can see what
happens when the screen size is small.
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
<br><br>
<div class="ap-dropdown secondary" dropdown-name="dropdown3" status="close">
<div...CSS
@font-face{font-family:'icomoon';src:url(../fonts/icomoon.eot?mwcbix);src:url('../fonts/icomoon.eot?mwcbix#iefix') format('embedded-opentype'),url(../fonts/icomoon.ttf?mwcbix) format('truetype'),url(../fonts/icomoon.woff?mwcbix) format('woff'),url('../fonts/icomoon.svg?mwcbix#icomoon') format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Open Sans',sans-serif;src:url(../fonts/SourceSansPro-Regular.ttf)}[class^="icon-"],[class*=" icon-"]{font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}[class^="ap-dropdown-"],[class*="ap-dropdown"]{font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{width:99%;height:100%}.ap-dropdown{display:inline-block;cursor:pointer;width:100%;height:40px;padding:0 5px 0 5px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ap-dropdown .head{height:40px;line-height:40px;padding:0 5px 0 5px;overflow:hidden;white-space:nowrap;border-radius:5px}.ap-dropdown .head .title{font-family:'Open Sans',sans-serif;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 40px);font-size:20px;color:#fff}.ap-dropdown .head:after{color:#fff;font-size:40px;float:right;padding:0 10px 0 0}.ap-dropdown .menu{position:absolute;width:100%;display:none;min-height:100px;margin-top:2px;border-radius:5px}.ap-dropdown .menu ul{list-style:none;margin:0;padding:10px;font-size:17px}.ap-dropdown .menu li{font-family:'Open Sans',sans-serif;border-radius:5px;padding:8px 5px 8px 5px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.2)}.ap-dropdown...JavaScript
(function(){const dropdowns=document.getElementsByClassName("ap-dropdown");let controlStatus=!0;let targetDropdown;let dropdown;for(i=0;i<dropdowns.length;i++){const opendropdown=document.querySelectorAll(".ap-dropdown[status='open']")[i];if(opendropdown){opendropdown.getElementsByClassName("menu")[0].style.display="block"}}
function controlDropdown(e){if(e.target.getAttribute("target-dropdown")!=null){targetDropdown=e.target.getAttribute("target-dropdown")}else{targetDropdown=e.target.getElementsByClassName("title")[0].getAttribute("target-dropdown")}
dropdown=document.querySelector(`.ap-dropdown[dropdown-name = '${targetDropdown}' ]`);const status=dropdown.getAttribute("status");if(status==="open"){dropdown.getElementsByClassName("menu")[0].style.display="none";dropdown.setAttribute("status","close")}else if(status==="close"){for(var i=0;i<dropdowns.length;i++){dropdowns[i].getElementsByClassName("menu")[0].style.display="none";dropdowns[i].setAttribute("status","close")}
dropdown.getElementsByClassName("menu")[0].style.display="inline-block";if(dropdown.clientWidth>500){dropdown.getElementsByClassName("menu")[0].style.width=dropdown.clientWidth-50}else{dropdown.getElementsByClassName("menu")[0].style.width=dropdown.clientWidth+50}
dropdown.setAttribute("status","open")}
controlStatus=!1}
function selectedItem(e){const value=e.target.innerHTML;const target=dropdown.getElementsByClassName("menu")[0].querySelector("ul").querySelectorAll("li");for(var i=0;i<target.length;i++){target[i].classList.remove("selected")}
e.target.classList.add("selected");dropdown.querySelector(".head .title").innerHTML=value}
for(var i=0;i<dropdowns.length;i++){dropdowns[i].querySelector(".head").addEventListener('click',controlDropdown,!1);var listItems=dropdowns[i].getElementsByClassName("menu")[0].querySelector("ul").querySelectorAll("li");for(var j=0;j<listItems.length;j++){listItems[j].addEventListener('click',selectedItem,!1)}}
window.onclick=function(){if(controlStatus){for(var...