pure javascript css navigation menu
Use this to build your skills and understanding of both horizontal and vertical navigation menus and how they operate.
<!DOCTYPE><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css vertical/horizontal navigational menu</title>
<!-- link href="" rel="stylesheet"/ -->
<style type='text/css'>
/**
CENTER BLOCK ITEM
margin:auto;width:50%;
CENTER INLINE ITEM
text-align: center;
**/
ul.nav{border:2px solid red;margin:auto;width:50%;}
ul.nav li:nth-child(even){background-color:#ffa;}
ul.nav li:nth-child(odd){background-color:#aff;}
ul.nav li a{font-family:Arial;text-decoration:none;}
/** remove the bullets and the margins and padding from the list **/
ul.submenu{list-style-type: none;}
ul.nav{
list-style-type: none;
padding: 0;
height: 100%; /** full height **/
/**
position: fixed; will nullify centering margins (auto)
**/
position: fixed; /** sticky, even on scroll **/
overflow: auto; /** scrolling if the sidenav content full **/
}
/** vertical navigation bar style the <li> elements ul.nav li{float:left; OR display:online;} **/
/** **/
ul.nav li{position:relative; }
ul.nav li a{}
/**
vertical navigation bar style the <a> elements ul.nav li a{display:block;}
#1 display as block element makes the whole link area clickable (not just the text)
#2 allows specify width (padding, margin, height, etc.)
**/
ul.nav li a.vertical {
display: inline-block;
padding: 8px 16px;
width: 60px;
}
ul.nav li a.vertical:hover {
background-color: #777;
color: white;
}
ul.nav li a.vertical:active {
background-color: #333;
color: white;
}
ul.nav li a.vertical:hover:not(:active) {
background-color: #AAA;
color: white;
}
/** remove extra border bottom pixels **/
li:last-child {
border-bottom: none;
}
/**
2 ways to create a horizontal navigation bar:
#1 inline list items
#2 float list items
**/
ul.tobetoggled{display:none;}
ul.submenu{
position:absolute;left:25%;top:25%;
}
ul.submenu li{}
/** #1 inline list items **/
/**
(DEFAULT) <li> = block
display: inline;
*removes newline before/after list items
**/
ul.submenu li.horizontal_inline{
display: inline;
}
ul.submenu li.horizontal_inline a{
/** display: block; // display inline!!! **/
padding: 8px;
background-color: #d0d;
}
/** #2 float list items **/
/**
float <li> & specify navigation link <a> layout
**/
ul.submenu li.horizontal_float{
float: left;
}
ul.submenu li.horizontal_float a{
/** display: block; // display float!!! **/
padding: 8px;
background-color: #dd0;
}
/** safer **/
.clearfix::after{
content: "";
clear: both;
display: table;
}
/** The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars) **/
.clearOverflow{overflow:auto;}
/** Fixed position might not work properly on mobile devices. **/
ul.fixedPosition{
position: fixed;
top: 0;/** OR bottom:0; **/
width: 100%;
}
ul.stickyPosition{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>
</head>
<body>
<header></header>
<section>
<ul class="nav">
<li><a class="vertical" href="#home">Home</a></li>
<li><a class="toggleMe vertical" href="#products">Products</a>
<ul class="tobetoggled submenu">
<li class="horizontal_inline"><a href="#wood">Wood</a></li>
<li class="horizontal_inline"><a href="#stone">Stone</a></li>
<li class="horizontal_inline"><a href="#metal">Metal</a></li>
</ul>
</li>
<li><a class="toggleMe vertical" href="#portfolio">Portfolio</a>
<ul class="tobetoggled submenu">
<li class="horizontal_float"><a href="#photography">Photography</a></li>
<li class="horizontal_float"><a href="#video">Video</a></li>
<li class="horizontal_float"><a href="#illustration">Illustration</a></li>
</ul>
</li>
<li><a class="vertical" href="#blog">Blog</a></li>
<li><a class="vertical" href="#contact">Contact</a></li>
</ul>
</section>
<footer></footer>
<script type="text/javascript">
var elements = document.getElementsByClassName("toggleMe");
console.log(elements.length)
for (var i=0;i<elements.length;i++) {
elements[i].addEventListener('click', function(){
// this.nextSibling.nextSibling.nodeName
var targetNode = this.nextSibling.nextSibling;
if (targetNode.style.display === "block") { targetNode.style.display = "none"; } else { targetNode.style.display = "block"; }
})
}
</script>
</body>
</html>
