Skip to content

Instantly share code, notes, and snippets.

@krtenn

krtenn/main.html

Created November 24, 2016 22:31
Show Gist options
  • Save krtenn/be58c4fa4cc378a524cc9f8d97f21764 to your computer and use it in GitHub Desktop.
Save krtenn/be58c4fa4cc378a524cc9f8d97f21764 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
main.html
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div class="menu">
<ul class="main-ul">
<li class="main-li">
Tools
<ul class="dropdown-content">
<p>Our selection of tools to get the job done, no matter what your project is</p>
<ul>
<li>Power Tools</li>
<li>Regular Tools</li>
<li>Screws and Nails</li>
</ul>
</ul>
</li>
<li class="main-li">
Cars
<ul class="dropdown-content">
<p>This is our selection of cool compact cars.</p>
<ul>
<li>
Dodge
</li>
<li>
Ford
</li>
<li>
Chevy
</li>
<li>
Honda
</li>
<li>
Nissan
</li>
<li>Volkswagen</li>
<li>Range Rover</li>
<li>Lexus</li>
<li>Other Unique Foreign and Domestic Vehicles</li>
<li>Antiques</li>
</ul>
</ul>
</li>
</ul>
</div>
<p>This is the page now. This change should be commited to git.</p>
</body>
<script src="menu.js"></script>
</html>
Raw
menu.css
@import url('https://fonts.googleapis.com/css?family=Lato');
@keyframes showNav {
from {opacity: 0;}
to {opacity: 1;}
}
body {
font-family: 'Lato', sans-serif;
}
.menu {
background: grey;
padding: 10px;
border-radius: 10px;
font-size: 22px;
}
/* this is the main structure for the list - can remove */
.main-ul {
border: solid yellow 5px;
margin: 5px;
padding: 10px;
border-radius: 10px;
}
/* these are the top menu links that, upon hover, show the dropdown content */
.main-li {
display: inline-block;
padding: 10px;
border: solid 1px;
border-radius: 5px;
/* max-width: 5%; */
}
.main-li:hover {
background-color: darkgrey;
cursor: pointer;
}
/* this is the nice little drop down menu div type object with the uls
notice its max width is 30% */
.dropdown-content {
display: none;
position: absolute;
background-color: darkgrey;
max-width: 35%;
padding: 10px;
border-radius: 5px;
}
/* this is a paragraph within the dropdown */
.dropdown-content p {
font-size: 18px;
background-color: yellow;
border-radius: 5px;
padding: 5px;
}
/* this is a ul within the dropdown */
.dropdown-content ul {
columns: 1;
column-width: 50%;
padding: 5px 2px 5px 2px;
}
/* this is an li within the dropdown */
.dropdown-content li {
display: block;
padding: 5px;
font-size: 0.8em;
border-radius: 5px;
break-inside: avoid;
}
.dropdown-content li:hover {
background-color: yellow;
transition: all 0.2s ease-in;
}
.main-li:hover .dropdown-content {
display: block;
animation: showNav 250ms ease-in both;
}
Raw
menu.js
var list2 = document.querySelectorAll(".dropdown-content ul");
for (var i = 0; i < list2.length; i++) {
var listItems = list2[i].children.length;
if (listItems > 6) {
list2[i].style.columns = 2;
list2[i].style.columnwidth = "50%";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment