cnet w3school filehippo wikipedia yahoo google google google google google google google google google google WELCOME. Thanks for visiting our site. Comment an advise for the development of the site
Related Posts Plugin for WordPress, Blogger...

Stylish Navigation bar like Css Tricks

Leave a Comment

Navigation is an important factor of a blog/site ,so that your visitors  can navigate through your blog .Most of you must know Chris Coyier of CSS-Tricks.com.His Blog is outstanding with his beautifully coded template.His blog is running in self-hosted wordpress platform and uses Responsive template made by him.One of the highlight of his blog is hisnavigation bar which probably better than any one's navbar.








Today we are going to learn How it is running , what are  the codes and of course

How we can add it our blogs ?

Take a look at a mock up created by me .
View Live Preview
This navbar is created with transition effects and awesome fonts(we have excluded such fonts to reduce size of his widget).It is coded with advanced CSS3 and HTML5 Codes which gives it a fresh look.
Enough of talk .Lets add it .First Part

Download the Code File



Download the  Codes just by Signing up for our newsletter.
Note that we wont share your email address with anyone.Your privacy is 100%  guaranteed .

#1 CSS Part

  1. Open the CSS file from the folder
  2. Make necessary changes and save  it another file (eg. Notepad) 
  3. Adding it your blog (Go to bottom to see how to add)

#2 HTML  Part


<!--     Coded By Tune2tech     --> 
<nav class='main-nav' id='main-nav'>
  <a class='home' href='/'>
     <span aria-hidden='true' data-icon='k'/>
     Home 
  </a>
  <a class='forums' href='/forums/'>
    <span aria-hidden='true' data-icon='9'/>
    Forums 
  </a>
  <a class='snippets' href='/snippets/'>
    <span aria-hidden='true' data-icon='Q'/>
    Snippets 
  </a>
  <a class='gallery' href='/gallery/'>
    <span aria-hidden='true' data-icon='p'/>
    Gallery 
  </a>
  <a class='videos' href='/video-screencasts/'>
    <span aria-hidden='true' data-icon='q'/>
    Videos 
  </a>
  <a class='almanac' href='/almanac/'>
    <span aria-hidden='true' data-icon='รณ'/>
    Almanac 
  </a>
  <a class='demos' href='/downloads/'>
    <span aria-hidden='true' data-icon='w'/>
    Demos 
  </a>
  <a class='deals' href='/deals/'>
    <span aria-hidden='true' data-icon='6'/>
    Deals  
  </a></nav>
  <!--/*     Coded By Tune2tech   */-->

Dont forget to Edit the HTML links( P.S -The HTML Part is included in index.html  in the downloaded ZIP file)

Adding this widget to your Blog

For Wordpress

  1. Just copy the  CSS code which you saved in notepad to your Styles.cssfile
  2. Add the HTML code to your Desired position.(You can even add it as HTML widget by going to appearance –> Widget->Text widget->paste and save.That’s all !!)

For Blogger

  1. Just paste CSS code which you saved in notepad from right above the ]]></b:skin> in your blogger Edit HTML/Templates Section
  2. Add HTML code in An HTMlL/Javascript widget and place it where ever you want.(Or if you are good in coding you can place it right below header widget)
Thats all pals !!! This widget is free to use  subscribe by email for more updates