This web page requires JavaScript to be enabled.

Apparently "noscript" tag content shows up in Facebook snippets ;)

How to enable JavaScript?

pure javascript css navigation menu – Elementarray

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">
    		<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'>
		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;}
	  	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.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 **/
	  	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) **/	

	/** Fixed position might not work properly on mobile devices. **/
	  	position: fixed;
	  	top: 0;/** OR bottom:0; **/
	  	width: 100%;
	  	position: -webkit-sticky; /* Safari */
	  	position: sticky;
	  	top: 0;





			<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>
			  	<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>
			  	<li><a class="vertical" href="#blog">Blog</a></li>
			  	<li><a class="vertical" href="#contact">Contact</a></li>



	<script type="text/javascript">

	  	var elements = document.getElementsByClassName("toggleMe");
		for (var i=0;i<elements.length;i++) { 
			elements[i].addEventListener('click', function(){
  				// this.nextSibling.nextSibling.nodeName
				var targetNode = this.nextSibling.nextSibling; 
if ( === "block") { = "none"; } else { = "block"; } 




Leave a Reply