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">
	
	<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>
0

Leave a Reply

en_USEnglish