Grow Horizontal Menu With Nice Font

Today we going to show you Grow Horizontal Menu With Nice Font. Almost every website providing tutorial which show user to add navigation menu on their website or blog, and they giving you a nice tutorial about that navigation menu. But here we going to give you, a Grow Horizontal Menu with Nice Font. Here we used Nice Font mean we added 'Righteous' font from google web fonts store and that is a nice font. When the mouse hover on the menu, it will increase the height and width of menu, making as stylish and attractive. 

Live Demo Download  

(If your are Blogger user, then click below button to add this menu to your blog)

HTML

<ul class="hor-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy</a></li>
</ul>

CSS

Here the CSS code for styling the menu and adding zoom hover effect.

.hor-nav li {
list-style: none; float:center;}
.hor-nav li {
float: left;
padding-top:10px; padding-bottom:20px;}
.hor-nav li a {
font-family: 'Righteous', cursive;
font-size:17px;
text-decoration:none;
float:center;
position: relative;
display: block;
padding: 14px 25px;
border-bottom: 8px solid #ccc;
background: #f4f4f4; color: #999;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out; }
.hor-nav li a:hover {
text-decoration:none;
color: #000; background: #fff;
border-color: #000;
padding: 25px; top: -14px; }
.hor-nav li .active a, .nav li .active a:hover {
background: #444; color: #fff;
border-color: #000; }

Javascript
Here the Javascript code for displaying nice font. 

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Righteous::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

Share and Enjoy!

SHARE

Tweet