Please Pray For The Martyred Children Of ‪#‎PeshawarAttack


Wait 3 Sec To Proceed
LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Navigation Bar / Website / Website Navigation Bar » HTML-CSS Stylish Page Navigation Bar For Blog & Website

HTML-CSS Stylish Page Navigation Bar For Blog & Website

HTML-CSS Stylish Page Navigation Bar For Blog & Website

Here We Have Simple But Stylish Pure HTML-CSS-Kit Cool Color Hover With Curve Corner Links Page Navigation Bar Having jQuery Effect Without JAVASCRIPT/jQuery File Or Code. We are comeback with another simple Navigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. Sometimes you want to add an additional navigational bar on to your website or blog, but many template and themes only support one menu. In my case the SEO hatch blog has a vertical menu which we use for our post categories, but I wanted to add a small additional menu for consulting inquiries without cluttering the main menu. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.


Features:

1.) Color Background With Color Hover.
2.) Slow Motion Hover In And Out.
3.) Curve Corner Links.
4.) J-Query Effect Without JAVASCRIPT File.
5.) Easy To Install And Quick To Load.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>
#exenavmenu {
float: left;
font: bold 13px Arial, Helvetica, Sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
overflow: hidden;
}
#exenavmenu ul {
margin:0;
padding:0;
list-style:none;
}
#exenavmenu ul li {
float:left;
}
#exenavmenu ul li a {
float: left;
color:#000;
padding: 10px 15px;
text-decoration:none;
background:#ff9d36; -webkit-transition: all 1s linear;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px px 1px rgba(0,0,0,0.4);
}
#exenavmenu ul li a:hover {
color: #fff; -webkit-transition: all 1s linear;
background:#220077; -webkit-transition: all 1s linear;
}
</style>
<div id="exenavmenu">
<ul>
<li><a href="##########">Home</a></li>
<li><a href="########## ">About Us</a></li>
<li><a href="########## ">Contact Us</a></li>
<li><a href="########## ">Tutorial</a></li>
<li><a href="########## ">Information</a></li>
<li><a href="########## ">Utilites</a></li>
<li><a href="########## ">Download New</a></li>
<li><a href="########## ">Feedback</a></li>
</ul>
</div>

Customization:

1.) Change Red Text With Your Link Name.
2.) Change Blue Hash With Your Links.
3.) Save And Enjoy.

You Like It, Please Share This Recipe With Your Friends Using...

10 Responses to “HTML-CSS Stylish Page Navigation Bar For Blog & Website”

  1. on-lineordering.com says:

    If anyone is looking for a cool top navigation component with drop-down menu, I found a nice one. It is responsive design, uses HTML5 and CSS3 and is black and grey gradient. Here is the link for you to check it out.

    http://templatz.co/navigation.php

  2. Web Design says:

    Stylish navigation bar….

    Thanks for sharing !!

  3. Anonymous says:

    Please help me i want to change my background color to fully black
    But,……
    Error is coming and not a single theme is applying…..
    Main colour theme
    Not applicable for this template.
    Please Help………..

  4. Anonymous says:

    Sure Blog url is :
    ::Game Persia::

  5. Anonymous says:

    u are master of blogger……
    The King……

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>