NavPractice

In this example below you will see how to do a NavPractice with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MrGreenGiantGraphics, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MrGreenGiantGraphics ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>NavPractice</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="nav_test">
<ul>
  <li><a href="/default.asp"><span><img src="http://www.babinsseafood.com/images/Fleur-icon.png" alt="Fluer Icon" width="20" height="20" border="0" /></img> Home<span></a></li>
    <li><a href="/aboutUs.asp"><span><img src="http://www.babinsseafood.com/images/Fleur-icon.png" alt="Fluer Icon" width="20" height="20" border="0" /></img>  About Us</span></a></li>
    <li><a href="/menus.asp"><span><img src="http://www.babinsseafood.com/images/Fleur-icon.png" alt="Fluer Icon" width="20" height="20" border="0" /></img>  Menus</span></a></li>
    <li><a href="/locations.asp"><span><img src="http://www.babinsseafood.com/images/Fleur-icon.png" alt="Fluer Icon" width="20" height="20" border="0" /></img>  Locations</span></a></li>
    <li><a href="/giftCards.asp"><span><img src="http://www.babinsseafood.com/images/Fleur-icon.png" alt="Fluer Icon" width="20" height="20" border="0" /></img> Gift Cards</span></a></li>
</ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MrGreenGiantGraphics/navpractice-EgQOvQ */
#nav_test {
  position: relative;
  left: 256px;
  top: 0px;
  height: 13px;
  line-height: 13px;
  font-size: 16px;
}

#nav_test ul {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

#nav_test li {
  display: block;
  color: #000;
  padding: 8px 30px;
  text-decoration: none;
  float: left;
}

#nav_test a {
  position: relative;
  display: block;
  height: 13px;
  text-align: center;
  text-decoration: none;
  color: #4b7444;
}

#nav_test li a:hover {
  font-size: 16px;
 	color: #ff0000; 
}

#nav_test li.on a {
	color: #000; 
	}

Comments