25 Free CSS Horizontal Navigation Menu bars
 |
| Image credit: Kromkrathog |
 |
| Image credit: Stuart Miles |
Before a few days back, I have given you 10 attractive CSS vertical menu designs. As a part of that “Navigation menu bar widgets” tutorial series, now I brought you another elegant 25 horizontal menu bar widget. These all horizontal menus have been designed with different patterns and a simple, clean look. In some menu designs, I used CSS3 pseudo elements to create tool-tips and arrows, which give an attractive look to the horizontal menu bar.
Before adding any horizontal menu bar, I recommend you to get a look at installing instructions and menu design samples, which can be viewed by clicking the Demo button. Last, don’t forget to spread out your thoughts, views about your favorite navigation template on the commenting section. So I can create a new one for you!
How can you spread your love? Help me improving these HTML Menu bars?
If you found that these HTML menus are attractive and worth-sharing among your friends and relatives, please take a few seconds to share this post (use social sharing buttons in side-bar for easy sharing). Or I would like if you link-out to this posts on your website. These are a few ways how you could say "Thanks!" for these FREE HTML navigation menus ;)
NB: These Horizontal Navigation menu templates are made using HTML and pure CSS. So don't worry about the Page loading speed, page bounce rate and search engine optimization. Web crawlers can easily crawl the content in these html menu bars. Once you downloaded one of these free menu bars for your website and installed the CSS and HTML menu bar code, you can change everything in these codes and even add site links in Google search.
Add HTML Horizontal menu bar to Blogger
You can add any of html menu bar templates give in below. They are working fine on your BlogSpot blog. Download menu bar in html and integrate on your Blogger blog. Don't just name like Label 1, Label 2 etc. Add a few keywords in your HTML horizontal menu bar. That way you can increase the CTR and indirectly increase the organic traffic.
Here's how to add horizontal menu bar in Blogger.
1: Sign in to your Blogger account.
2: Then go to Dashboard → Template → Edit HTML.
3: Find below code in your template.
]]>
4: Then right before it, paste the CSS code of HTML menu bar immediately.
5: Save your template and go to Layout.
6: Click on 'Add a Gadget' link and choose the HTML/JavaScript gadget. Paste the HTML code of menu bar and save it.
7: Last drop it onto the header layout box or footer layout box where horizontal menu bar appears. Then click on "Save settings" button.
Don't your Blogger Template have a section in Header section? Read this step by step tutorial onHow to Add "Add a Gadget" section to BlogSpot Header.
Install HTML menu bar on WordPress
Do you want to know how to add menu bar in WordPress? Here's how to integrate your stylish menu bar in CSS to your WordPress blog.
1: Go to WordPress Dashboard (WP-admin panel).
2: Now navigate to Appearance → Editor
3: Select Theme stylesheet and paste the CSS code of horizontal navigation menu bar on bottom of text editor.
4: If your WordPress blog has a widget section in the header, you can add the HTML code to a text file and drop it to where navigation menu bar appears.
Else you can add it directly to WordPress theme.
Click on header.php or footer.php
If you added it on header.php file, the menu bar will display on the header (Top of blog). If you pasted the HTML code in the footer.php file, Then it will appear on the bottom of the blog.
Add Horizontal menu bar to Tumblr
Tumblr is a social networking and a micro-blogging platform. You can add any of below attractive menu bars into your Tumblr blog. It will not only increase the average page views per visitor, but also increase your Tumblr blog SEO performance. Here's how to add html codes for menu bar into Tumblr.
1: Sign into your Tumblr account and navigate to Tumblog Dashboard.
2: Now go to Settings (click on gear icon) → select your blog → Click on 'Customize' button under theme section. Then click on 'Edit HTML' link. Before making any change in your Theme, backup Tumblr blog.
3: Find below code in your Tumblr theme. (Tip: use Ctrl + F in PC or Command + F in Mac)
{CustomCSS}4: Just above of it, paste the CSS code of horizontal navigation menu bar widget.
5: Then find below HTML code in your Tumblr theme.
6: Paste the HTML code of menu bar, right after of above code.( Look at below image) You can differ the distance within menu bar and post content by adding
tag.Click on image to see.
 |
| Click Image to Enlarge |
- How to add Facebook Comment box to Tumblr
- Free Tumblr Themes vs Premium Tumblr Themes
- Tumblr On-Page Optimization techniques (Increase Organic Traffic insanely)
Horizontal menu bar: Style #1
This is the first of twenty five navigation menu collection. I used CSS3 gradients and hovering effects,which make it is a smooth navigation menu bar. You can put navigation menu to Tumblrwithout any hesitation, because of it's applicable for both dark and white color themes. Although this is the first of CSS stylish menu designs, don't forget to view this HTML navbar on your web browser.
CSS Code
#Hr-1 {
list-style:none;
margin:0 0 0px 0;
padding:0;
}
#Hr-1 li {
margin:0;
padding:0;
float:left;
}
#Hr-1 li a {
display:inline;
overflow:hidden;
width:auto;
margin:0;
padding:8px 12px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-weight:bold;
font-style:normal;
font-size:23px;
color:rgba(236,236,236,0.5);
text-shadow:0px 1px 0px #000;
border-right:1px solid #202020;
background-color::#4B4B4B;
background:-webkit-gradient(linear,left top,right bottom,from(#2B2B2B),color-stop(0.33 #4B4B4B),color-stop(0.66 #5B5B5B),to(#3D3C3C));
background:-webkit-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:-moz-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:-o-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:-ms-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
background:linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);
-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-o-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}
#Hr-1 li a:hover,#Hr-1 li a:active,#Hr-1 li a:focus {
color:#ECB036;
text-shadow:0px 1px 0px #8E620C;
background:#313130;
-moz-transition:none;-webkit-transition:none;-o-transition:none;transition:none;
}
HTML Code
Horizontal menu bar: Style #2
Ashen horizontal navigation widget looks like a rocky tabbed widget. I used CSS transitions to make it too late to actuate the hovering effects. If you're finding an attractive navigation bar with slow hovering effects for your website, try this CSS menu design. It will not only give a unique look to your website, but also increase the attractiveness of your website design. Want to see how this simple css horizontal menu bar works on your web browser. So simply click on this link.
CSS code
#Hr-2 {
list-style:none;
margin:0 0 10px; 0;
padding:0;
}
#Hr-2 li {
margin:0;
padding:0;
float:left;
}
#Hr-2 li a {
display:inline;
position:relative;
margin:0;
padding:10px 13px;
width:auto;
height:auto;
text-decoration:none;
text-align:center;
font-style:normal;
font-size:24px;
font-weight:bold;
color:#2B2B2B;
text-shadow:0px 1px 0px #1F1F1F;
text-transform:capitalize;
border-right:1px solid #666562;
background:-webkit-gradient(100% 0%,0% 0%,from(#ABA9A6),color-stop(0.35 rgba(177,176,173,0.6)),color-stop(0.70 #A3A19D),to(#92908C));
background:-moz-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:-webkit-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:-o-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:-ms-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
background:linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);
-moz-transition:all .8s ease-out;
-webkit-transition:all .8s ease-out;
transition:all .8s ease-out;
}
#Hr-2 li a:hover,#Hr-2 li a:active {
color:rgba(244,244,244,0.3);
text-shadow:0px 1px 0px #545453;
background:-webkit-gradient(100% 0%,0% 0%,from(#999896),color-stop(0.35 rgba(177,176,173,0.6)),color-stop(0.70 #A3A19D),to(#817F7A));
background:-moz-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:-webkit-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:-o-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:-ms-linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
background:linear-gradient(top,#999896 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#817F7A 100%);
-moz-transition:all .6s ease-in;
-webkit-transition:all .6s ease-in;
transition:all .6s ease-in;
}
HTML Code
Horizontal menu bar: Style #3
You would like to this navigation menu. As it has widen height, width and attractive font designs. It is looking like a professional menu widget. To add this menu bar to your blog, simply download menu bar html and CSS codes given below. Then change the anchor texts and URLs as you want. It's very simple like ABC. :)
CSS Code
#Hr-3 {
list-style:none;
margin:3px;
padding:0;
}
#Hr-3 li {
float:left;
margin:0;
padding:0;
}
#Hr-3 li a {
display:inline;
margin:0;
overflow:hidden;
padding:8px 13px;
float:left;
width:auto;
height:auto;
text-decoration:none;
text-transform:capitalize;
text-align:center;
line-height:2em;
font-style:normal;
font-size:28px;
font-weight:bold;
color:#4B4949;
text-shadow:0px 1px 0px #302F2F;
border-right:1px solid #C4C0C0;
background-image:-webkit-gradient(linear,100% 0%,0% 0%,from(rgba(155,155,155,0.5)),color-stop(0.35 #B5B5B5),color-stop(0.70 #B9B8B8),to(#AFAFAF));
background-image:-webkit-linear-gradient(top,rgba(155,155,155,0.5) 0%,#B5B5B5 35%,#B9B8B8 70%,#AFAFAF 100%);
background-image:-moz-linear-gradient(top,rgba(155,155,155,0.5) 0%,#B5B5B5 35%,#B9B8B8 70%,#AFAFAF 100%);
background-image:-o-linear-gradient(top,rgba(155,155,155,0.5) 0%,#B5B5B5 35%,#B9B8B8 70%,#AFAFAF 100%);
background-image:-ms-linear-gradient(top,rgba(155,155,155,0.5) 0%,#B5B5B5 35%,#B9B8B8 70%,#AFAFAF 100%);
background-image:linear-gradient(top,rgba(155,155,155,0.5) 0%,#B5B5B5 35%,#B9B8B8 70%,#AFAFAF 100%);
-moz-transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
transition:all 0.6s ease;
}
#Hr-3 li a:hover {
color:#4B4945;
background-image:-webkit-gradient(linear,100% 0%,0% 0%,from(rgba(155,155,155,0.8)),color-stop(0.35 #B5B5B5),color-stop(0.70 #B9B8B8),to(#CBC7C7));
background-image:-webkit-linear-gradient(top,rgba(155,155,155,0.8) 0%,#B5B5B5 35%,#B9B8B8 70%,#CBC7C7 100%);
background-image:-moz-linear-gradient(top,rgba(155,155,155,0.8) 0%,#B5B5B5 35%,#B9B8B8 70%,#CBC7C7 100%);
background-image:-o-linear-gradient(top,rgba(155,155,155,0.8) 0%,#B5B5B5 35%,#B9B8B8 70%,#CBC7C7 100%);
background-image:-ms-linear-gradient(top,rgba(155,155,155,0.8) 0%,#B5B5B5 35%,#B9B8B8 70%,#CBC7C7 100%);
background-image:linear-gradient(top,rgba(155,155,155,0.8) 0%,#B5B5B5 35%,#B9B8B8 70%,#CBC7C7 100%);
-moz-transition:background-image 0.6s ease;
-webkit-transition:background-image 0.6s ease;
-o-transition:background-image 0.6s ease;
transition:background-image 0.6s ease;
}
#Hr-3 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-3 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
HTML Code
Horizontal menu bar: Style #4
By default the hovering background color is black and font color is similar to white. CSS gradients, dotted borders and rounded corners make it is a beautiful menu widget. Want to see how this CSS navigation bar template looks in our demo blog? Click Here.
CSS Code
#Hr-4 {
list-style:none;
margin:0;
padding:0;
float:left;
}
#Hr-4 li {
margin:0;
padding:0;
float:left;
}
#Hr-4 li a {
display:inline;
float:left;
overflow:hidden;
margin:0;
width:auto;
height:auto;
padding:10px 12px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:25px;
border-right:1px dotted #1C1C1C;
color:#ECECEC;
font-family:'Comic Sans MS',cursive;
background:#2C2C2C;
background:-webkit-gradient(linear,left top,right bottom,from(#101010),color-stop(0.35 #2C2C2C),color-stop(0.73 #545252),color-stop(0.90 #3F3C3C),to(#2A2727));
background:-webkit-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-moz-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-o-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-ms-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
}
#Hr-4 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-4 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-4 li a:hover,#Hr-4 li a:focus {
background:#2C2C2C;
color:#4A75F7;
cursor:pointer;
}
HTML Code
Horizontal menu bar: Style #5
Like in above menu design,this navigation bar has all its appearances. But it's hovering effects are different from above HTML CSS menu design. If you were searching for a good menu bar for blogger, take a look at this attractive horizontal menu clicking above demo button.
CSS Code
#Hr-5 {
list-style:none;
margin:0;
padding:0;
float:left;
}
#Hr-5 li {
float:left;
margin:0;
padding:0;
}
#Hr-5 li a {
display:inline;
float:left;
width:auto;
height:auto;
overflow:hidden;
margin:0;
padding:9px 13px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-weight:bold;
font-size:24px;
font-style:normal;
color:#F2EFEF;
border-right:1px dotted #060606;
background:#222121;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#131212,0),color-stop(#222121,0.4),color-stop(#474646,0.8),color-stop(#3C3939,1));
background:-webkit-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: -moz-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: -o-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
-moz-transition:0.5s ease-out;
-webkit-transition:0.5s ease-out;
transition:0.5s ease-out;
}
#Hr-5 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-5 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-5 li a:hover,#Hr-5 li a:active {
background-color:#3047DB;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#3047DB,0),color-stop(#3088DB,0.4),color-stop(#48AAE7,0.8),color-stop(#48BAE7,1));
background:-webkit-linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
background: -moz-linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
background: -o-linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
background: linear-gradient(top,#3047DB 0%,#3088DB 40%,#48AAE7 80%,#48BAE7 100%);
color:#97410F;
-moz-transition:0.5s ease-in;
-webkit-transition:0.5s ease-in;
transition:0.5s ease-in;
border-right:1px solid transparent;
}
HTML Code
Horizontal menu bar: Style #6
Another attractive HTML menu bar. CSS background gradients and borders make the tabs are buttons. If you don't like these colors, you can change them to your desired colors. For more information, please read instructions given in the bottom of this page.
CSS Code
#Hr-6 {
list-style:none;
margin:0 0 10px 0;
padding:0;
float:left;
}
#Hr-6 li {
margin:0;
padding:0;
float:left;
}
#Hr-6 li a {
display:inline;
margin:0;
overflow:hidden;
padding:10px 12px;
float:left;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:24px;
width:auto;
height:auto;
color:#EAEEEE;
background:#994A22;
border-right:1px solid #A1721A;
background:-webkit-gradient(linear,left top,left bottom,from(#643118),color-stop(0.35 #924C29),color-stop(0.70 #9D4214),to(#6C2B0A));
background:-webkit-linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:-moz-linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:-o-linear-gradient:(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:-ms-linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
background:linear-gradient(top,#643118 0%,#924C29 35%,#9D4214 70%,#6C2B0A 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#643118, endColorstr=#6C2B0A);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#643118, endColorstr=#6C2B0A)";
font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
}
#Hr-6 li a:hover,#Hr-6 li a:focus {
background:#843F20;
-moz-box-shadow:inset 0px 0px 2px 2px #5E2710;
-webkit-box-shadow:inset 0px 0px 2px 2px #5E2710;
box-shadow:inset 0px 0px 2px 2px #5E2710;
color:#F2F4F4;
}
#Hr-6 li a:active {
position:relative;
top:0px;
-moz-box-shadow:inset 0px 0px 4px 2px #5E2710;
-webkit-box-shadow:inset 0px 0px 4px 2px #5E2710;
box-shadow:inset 0px 0px 4px 2px #5E2710;
}
#Hr-6 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-6 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
HTML Code
Horizontal menu bar: Style #7
You may like this menu as its design which gets user's attention. Box shadows and color patterns make this stylish menu more user friendly. Don't forget to live preview this CSS menu bar on your web browser.
CSS Code
#Hr-7 {
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-7 li {
margin:0;
padding:0;
float:left;
}
#Hr-7 li a {
float:left;
display:inline;
overflow:hidden;
width:auto;
height:auto;
margin:0;
padding:9px 14px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:26px;
color:#eee;
text-shadow:0px 1px 0px #0aa,;
font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
background:#333;
border-right:1px solid #252626;
background:-webkit-gradient(linear,left top,left bottom,from(#333333),color-stop(0.50 #4C4F53),to(#303335));
background:-webkit-linear-gradient(top,#333333 0%,#4C4F53 50%,#303335 100%);
background:-moz-linear-gradient(top,#333333 0%,#4C4F53 50%,#303335 100%);
background:-ms-linear-gradient(top,#333333 0%,#4C4F53 50%,#303335 100%);
background:-o-linear-gradient(top,#333333 0%,#4C4F53 50%,#303335 100%);
background:linear-gradient(top,#333333 0%,#4C4F53 50%,#303335 100%);
background:gradient(top,#333333 0%,#4C4F53 50%,#303335 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#333333, endColorstr=#303335);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#333333, endColorstr=#303335)";
}
#Hr-7 li a:hover,#Hr-7 li a:focus {
color:#bbb;
-moz-box-shadow:inset 0 0 2px 1px #212122;
-webkit-box-shadow:inset 0 0 2px 1px #212122;
box-shadow:inset 0 0 2px 1px #212122;
background:#3D3D3D;
}
#Hr-7 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-7 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
HTML Code
Horizontal menu bar: Style #8
Green color menu bar is applicable to a white background color theme. Just get the html menu bar code and place it as i explained above.
CSS Code
#Hr-8 {
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-8 li {
margin:0;
padding:0;
float:left;
}
#Hr-8 li a {
position:relative;
float:left;
display:inline;
width:auto;
height:auto;
overflow:hidden;
margin:0;
padding:10px 13px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
line-height:auto;
font-size:26px;
color:#2436D3;
border-right:1px groove #0F6B29;
font-weight:bold;
font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
background:#55E64D;
background:-webkit-gradient(linear,left top,left bottom,from(#31C02A),color-stop(0.08 #3ACB32),color-stops(0.30 #55E64D),color-stop(0.45 #4DE690),color-stop(0.60 #4DDC51),color-stop(0.75 #3EAA42),color-stop(0.90 #2F9D33),to(#1E8721));
background:-moz-linear-gradient(top,#31C02A 0%,#3ACB32 8%,#55E64D 30%,#4DE690 45%,#4DDC51 60%,#3EAA42 75%,#2F9D33 90%,#1E8721 100%);
background:-webkit-linear-gradient(top,#31C02A 0%,#3ACB32 8%,#55E64D 30%,#4DE690 45%,#4DDC51 60%,#3EAA42 75%,#2F9D33 90%,#1E8721 100%);
background:-o-linear-gradient(top,#31C02A 0%,#3ACB32 8%,#55E64D 30%,#4DE690 45%,#4DDC51 60%,#3EAA42 75%,#2F9D33 90%,#1E8721 100%);
background:-ms-linear-gradient(top,#31C02A 0%,#3ACB32 8%,#55E64D 30%,#4DE690 45%,#4DDC51 60%,#3EAA42 75%,#2F9D33 90%,#1E8721 100%);
background:linear-gradient(top,#31C02A 0%,#3ACB32 8%,#55E64D 30%,#4DE690 45%,#4DDC51 60%,#3EAA42 75%,#2F9D33 90%,#1E8721 100%);
}
#Hr-8 li a:hover,#Hr-8 li a:focus {
color:#5934A8;
-moz-box-shadow:inset 0 0 2px 1px #1E6D35;
-webkit-box-shadow:inset 0 0 2px 1px #1E6D35;
box-shadow:inset 0 0 2px 1px #1E6D35;
background:#20A746;
}
#Hr-8 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-8 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
HTML Code
Horizontal menu bar: Style #9
Another html menu bar for white color templates. You can change its colors and sizes by modifying the CSS code. So see below customization section to know how to do it.
CSS Code
#Hr-9 {
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-9 li {
margin:0;
padding:0;
float:left;
}
#Hr-9 li a {
float:left;
display:inline;
width:auto;
overflow:hidden;
height:auto;
margin:0;
white-space:nowrap;
padding:10px 13px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
line-height:auto;
font-style:normal;
font-size:26px;
font-family:'Trebuchet MS',sans-serif;
font-weight:thin;
color:#F3D92E;
border-right:1px solid #121314;
background:#253FD4;
background:-webkit-gradient(linear,left top,left bottom,from(#253FD4),color-stop(0.40 rgba(18,38,180,0.99)),color-stop(rgba(13,38,203,0.75) 0.70),to(#2339B8));
background:-webkit-linear-gradient(top,#253FD4,rgba(18,38,180,0.99) 40%,rgba(13,38,203,0.75) 70%,#2339B8 100%);
background:-moz-linear-gradient(top,#253FD4,rgba(18,38,180,0.99) 40%,rgba(13,38,203,0.75) 70%,#2339B8 100%);
background:-ms-linear-gradient(top,#253FD4,rgba(18,38,180,0.99) 40%,rgba(13,38,203,0.75) 70%,#2339B8 100%);
background:-o-linear-gradient(top,#253FD4,rgba(18,38,180,0.99) 40%,rgba(13,38,203,0.75) 70%,#2339B8 100%);
background:linear-gradient(top,#253FD4,rgba(18,38,180,0.99) 40%,rgba(13,38,203,0.75) 70%,#2339B8 100%);
}
#Hr-9 li a:hover,#Hr-9 li a:focus {
color:#4CDD32;
-moz-box-shadow:inset 0 0 2px 1px #1E6D35;
-webkit-box-shadow:inset 0 0 2px 1px #1E6D35;
box-shadow:inset 0 0 2px 1px #1E6D35;
background:#1C2FD2;
}
#Hr-9 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-9 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
#Hr-9 li a:active {
-moz-box-shadow:inset 0 0 4px #1E6D35;
-webkit-box-shadow:inset 0 0 4px #1E6D35;
box-shadow:inset 0 0 4px #1E6D35;
}
HTML Code
Horizontal menu bar: Style #10
Pleasant horizontal navigation menu bar is for your website. It's looking good on both white and black background themes. You can change the colors and hovering effects changing the CSS code. View its demo to know how it's looking like.
CSS Code
#Hr-10 {
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-10 li {
margin:0;
padding:0;
float:left;
}
#Hr-10 li a {
float:left;
display:inline;
overflow:hidden;
white-space:nowrap;
width:auto;
height:auto;
margin:0;
padding:10px 13px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
line-height:auto;
font-style:normal;
font-size:26px;
color:#5B5B5A;
text-shadow:0 1px 0 #222,0 1px 0 #222;
border-right:1px solid #B69D2E;
font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
background:-webkit-gradient(left top,left bottom,from(#DDC432),color-stop(0.50 #EFC700),to(#C9A017));
background:-webkit-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:-moz-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:-o-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:-ms-linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
background:linear-gradient(top,#DDC432 0%,#EFC700 50%,#C9A017 100%);
}
#Hr-10 li a:hover,#Hr-10 li a:focus {
color:blue;
-moz-box-shadow:inset 0 0 2px 1px #D3A50F;
-webkit-box-shadow:inset 0 0 2px 1px #D3A50F;
box-shadow:inset 0 0 2px 1px #D3A50F;
background:#E5CF2C;
}
#Hr-10 li:first-child a {
-moz-border-radius:6px 0 0 6px;
-webkit-border-radius:6px 0 0 6px;
border-radius:6px 0 0 6px;
}
#Hr-10 li:last-child a {
-moz-border-radius:0 6px 6px 0;
-webkit-border-radius:0 6px 6px 0;
border-radius:0 6px 6px 0;
}
#Hr-10 li a:active {
-moz-box-shadow:inset 0 0 4px #D3A50F;
-webkit-box-shadow:inset 0 0 4px #D3A50F;
box-shadow:inset 0 0 4px #D3A50F;
}
HTML Code
Horizontal menu bar: Style #11
This menu design is different from others. Normally this menu bar hasn't many styles. But when hovering and clicking on, it shows some designs like changing background color,font color and adding box-shadows. Like all horizontal HTML menu bars, you can change the appearance of this horizontal menu template very easily.
CSS Code
#Hr-11 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-11 li {
margin:0;
padding:0;
float:left;
}
#Hr-11 li a {
display:inline;
float:left;
padding:11px 14px;
text-decoration:none;
text-align:center;
font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
text-transform:capitalize;
font-size:24px;
font-weight:bold;
background:#4270E4;
color:#A16312;
border-right:1px solid transparent;
border-left:1px solid transparent;
background:-webkit-gradient(linear,left top,left bottom,from(#4270E4),to(#A5BEFD));
background:-webkit-linear-gradient(top,#4270E4 0%,#A5BEFD 100%);
background:-moz-linear-gradient(top,#4270E4 0%,#A5BEFD 100%);
background:-o-linear-gradient(top,#4270E4 0%,#A5BEFD 100%);
background:-ms-linear-gradient(top,#4270E4 0%,#A5BEFD 100%);
background:linear-gradient(top,#4270E4 0%,#A5BEFD 100%);
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
#Hr-11 li a:hover,#Hr-11 li a:focus {
color:#835211;
border-right:1px solid #3813DA;
border-left:1px solid #3813DA;
box-shadow:inset 0px 2px 2px 2px #505350;
background:#A5BEFD;
background:-webkit-gradient(linear,left top,left bottom,from(#A5BEFD),to(#A5BEFD));
background:-webkit-linear-gradient(top,#A5BEFD 0%,#A5BEFD 100%);
background:-moz-linear-gradient(top,#A5BEFD 0%,#A5BEFD 100%);
background:-o-linear-gradient(top,#A5BEFD 0%,#A5BEFD 100%);
background:-ms-linear-gradient(top,#A5BEFD 0%,#A5BEFD 100%);
background:linear-gradient(top,#A5BEFD 0%,#A5BEFD 100%);
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
transition:all 0.3s ease-in;
}
#Hr-11 li a:active {
-moz-box-shadow:inset 0px 2px 2px 2px #061167;
-webkit-box-shadow:inset 0px 2px 2px 2px #061167;
box-shadow:inset 0px 2px 2px 2px #061167;
}
HTML Code
Horizontal menu bar: Style #12
When mouse over, it shows a green color line and when clicking a tab,it changes its color to a blue. To see how this stylish menu bar widget, click on above DEMO button.
CSS Code
#Hr-12 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-12 li {
margin:0;
padding:0;
float:left;
}
#Hr-12 li a {
display:inline;
float:left;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-style:normal;
font-weight:bold;
color:#EFD550;
border-right:1px solid #696969;
background:#8D8D8D;
background:-webkit-gradient(linear,left top,left bottom,from(#8E8E8E),to(#676760));
background:-webkit-linear-gradient(top,#8E8E8E 0%,#676760 100%);
background:-moz-linear-gradient(top,#8E8E8E 0%,#676760 100%);
background:-o-linear-gradient(top,#8E8E8E 0%,#676760 100%);
background:-ms-linear-gradient(top,#8E8E8E 0%,#676760 100%);
background:linear-gradient(top,#8E8E8E 0%,#676760 100%);
-moz-transition:all .3s ease-out;
-webkit-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
}
#Hr-12 li a:hover {
-moz-box-shadow:inset 0px 5px 0px 0px #38E589;
-webkit-box-shadow:inset 0px 5px 0px 0px #38E589;
box-shadow:inset 0px 5px 0px 0px #38E589;
-moz-transition:all .3s ease-in;
-webkit-transition:all .3s ease-in;
-o-transition:all .3s ease-in;
transition:all .3s ease-in;
}
#Hr-12 li a:active {
-moz-box-shadow:inset 0px 5px 0px 0px #3A3CCF;
-webkit-box-shadow:inset 0px 5px 0px 0px #3A3CCF;
box-shadow:inset 0px 5px 0px 0px #3A3CCF;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
#Hr-12 li:last-child a {
border-right-style:none;
}
HTML Code
Horizontal menu bar: Style #13
Another attractive navigation menu with different menu design. I used Box shadow as the menu bar's background color. so after adding CSS transitions, it has a pretty good look. You can make necessary changes to adapt this CSS navigation menu bar to your website template.
CSS Code
#Hr-13 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-13 li {
margin:0;
padding:0;
float:left;
}
#Hr-13 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
width:auto;
padding:auto;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
font-style:normal;
color:#EFEFEF;
font-weight:bold;
background:#604714;
border-right:1px solid #7B5812;
background:-webkit-gradient(linear,left top,left bottom,from(#5C3F05),color-stop(0.50 #604714),to(#835D11));
background:-webkit-linear-gradient(top,#5C3F05 0%,#604714 50%,#835D11 100%);
background:-moz-linear-gradient(top,#5C3F05 0%,#604714 50%,#835D11 100%);
background:-o-linear-gradient(top,#5C3F05 0%,#604714 50%,#835D11 100%);
background:-ms-linear-gradient(top,#5C3F05 0%,#604714 50%,#835D11 100%);
background:linear-gradient(top,#5C3F05 0%,#604714 50%,#835D11 100%);
}
#Hr-13 li a:hover,#Hr-13 li a:focus {
-webkit-box-shadow:inset 0px 64px 0px 0px black;
-moz-box-shadow:inset 0px 64px 0px 0px black;
box-shadow:inset 0px 64px 0px 0px black;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
#Hr-13 li:last-child a {
border-right:none;
}
HTML Code
Horizontal menu bar: Style #14
Like above menu design,i used box shadow with different angle and color. You can control the hover color in menu bar and loading delay of box-shadow color. See below customization section.
CSS Code
#Hr-14 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-14 li {
margin:0;
padding:0;
float:left;
}
#Hr-14 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#555452;
border-right:1px solid #F1F1F1;
font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
font-style:normal;
background:-webkit-gradient(linear,left top,left bottom,from(#DDDDDD),color-stop(0.50 #EFEDEA),to(#F0F0F0));
background:-webkit-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
background:-moz-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
background:-o-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
background:-ms-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
background:linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
}
#Hr-14 li:nth-child(2n) a:hover {
-moz-box-shadow:inset 0px -4px 0px 0px #19B662;
-webkit-box-shadow:inset 0px -4px 0px 0px #19B662;
box-shadow:inset 0px -4px 0px 0px #19B662;
-moz-transition:all 0.35s ease-in;
-webkit-transition:all 0.35s ease-in;
-o-transition:all 0.35s ease-in;
transition:all 0.35s ease-in;
}
#Hr-14 li:nth-child(2n-1) a:hover {
-moz-box-shadow:inset 0px -4px 0px 0px #2AD887;
-webkit-box-shadow:inset 0px -4px 0px 0px #2AD887;
box-shadow:inset 0px -4px 0px 0px #2AD887;
-moz-transition:all 0.35s ease-in;
-webkit-transition:all 0.35s ease-in;
-o-transition:all 0.35s ease-in;
transition:all 0.35s ease-in;
}
#Hr-14 li:last-child {
border-right:none;
}
#Hr-14 li:nth-child(n+1) a:active {
-moz-box-shadow:inset 0px -60px 0px 0px #DCDCDC;
-webkit-box-shadow:inset 0px -60px 0px 0px #DCDCDC;
box-shadow:inset 0px -60px 0px 0px #DCDCDC;
-moz-transition:all 0.35s ease-in-out;
-webkit-transition:all 0.35s ease-in-out;
-o-transition:all 0.35s ease-in-out;
transition:all 0.35s ease-in-out;
}
#Hr-14 li:nth-child(2n-1) a:active {
-moz-box-shadow:inset 0px -60px 0px 0px #DCDCDC;
-webkit-box-shadow:inset 0px -60px 0px 0px #DCDCDC;
box-shadow:inset 0px -60px 0px 0px #DCDCDC;
-moz-transition:all 0.35s ease-in-out;
-webkit-transition:all 0.35s ease-in-out;
-o-transition:all 0.35s ease-in-out;
transition:all 0.35s ease-in-out;
}
HTML Code
Horizontal menu bar: Style #15
This is another simple horizontal CSS menu. If you want to make it a 100 width horizontal menu, you have to change its font color and padding width basically,sometimes it could be font family too. I haven't assigned a default width and height to navigation menu.so it's enough to change the Padding values to make a 100 width horizontal menu. (Just a instance)
CSS Code
#Hr-15 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-15 li {
margin:0;
padding:0;
float:left;
}
#Hr-15 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#555452;
border-right:1px solid #F1F1F1;
font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
font-style:normal;
background:#ECECEC;
background:-webkit-gradient(linear,left top,left bottom,from(#DCDCDC),color-stop(0.50 #ECECEC),to(#F1F1F1));
background:-webkit-linear-gradient(top,#DCDCDC 0%,#ECECEC 50%,#F1F1F1 100%);
background:-moz-linear-gradient(top,#DCDCDC 0%,#ECECEC 50%,#F1F1F1 100%);
background:-o-linear-gradient(top,#DCDCDC 0%,#ECECEC 50%,#F1F1F1 100%);
background:-ms-linear-gradient(top,#DCDCDC 0%,#ECECEC 50%,#F1F1F1 100%);
background:linear-gradient(top,#DCDCDC 0%,#ECECEC 50%,#F1F1F1 100%);
-moz-transition:all 0.4s ease-out;
-webkit-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#Hr-15 li a:hover,#Hr-15 li a:focus {
background:#ECECEC;
background:-webkit-gradient(linear,left top,left bottom,from(#C2C2C2),color-stop(0.50 #ECECEC),to(#DEDEDE));
background:-webkit-linear-gradient(top,#C2C2C2 0%,#ECECEC 50%,#DEDEDE 100%);
background:-moz-linear-gradient(top,#C2C2C2 0%,#ECECEC 50%,#DEDEDE 100%);
background:-o-linear-gradient(top,#C2C2C2 0%,#ECECEC 50%,#DEDEDE 100%);
background:-ms-linear-gradient(top,#C2C2C2 0%,#ECECEC 50%,#DEDEDE 100%);
background:linear-gradient(top,#C2C2C2 0%,#ECECEC 50%,#DEDEDE 100%);
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
-webkit-box-shadow:inset 0px 0px 5px 0px #777777;
-moz-box-shadow:inset 0px 0px 5px 0px #777777;
box-shadow:inset 0px 0px 5px 0px #777777;
-moz-transition:all 0.4s ease-out;
-webkit-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#Hr-15 li:last-child a {
border:none;
}
HTML Code
Horizontal menu bar: Style #16
This is another pleasant menu widget that i like.If you viewed the demo page, you might be thinking that is this a jquery horizontal menu. But this is only a simple css horizontal menu like others. No JavaScript and Images. To see how this cute HTML navigation menu looks like, click on above DEMO button.
CSS Code
#Hr-16 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-16 li {
margin:0;
padding:0;
float:left;
}
#Hr-16 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#555452;
background:#29BCFB;
border:1px solid #707071;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
color:#F6F6F8;
text-shadow:0px -1px 0px black;
-moz-transition:all 310ms ease-in-out 0s;
-webkit-transition:all 310ms ease-in-out;
-o-transition:all 310ms ease-in-out;
transition:all 310ms ease-in-out;
}
#Hr-16 li a:hover {
box-shadow:inset 0px 60px 0px 0px #4B83F4;
-moz-transition:all 270ms ease-in-out 0s;
-webkit-transition:all 310ms ease-in-out;
-o-transition:all 270ms ease-in-out;
transition:all 270ms ease-in-out;
}
HTML Code
Horizontal menu bar: Style #17
This horizontal navigation menu contains rounded corners and box-shadows, which give a pattern to horizontal menu bar. It's a nice horizontal menu with attractive design. If you are searching a horizontal HTML menu bar for your environmental blog, this might be your pleasant menu design. To install this menu, simply download free menu bar CSS and HTML codes and change the anchor texts. You can do keyword research using Google keyword planner to find high converting and low competitive keywords.
CSS Code
#Hr-17 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-17 li {
margin:0;
padding:0;
float:left;
}
#Hr-17 li a {
display:inline;
float:left;
margin:0;
padding:11px 14px;
overflow:hidden;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
border:1px ridge #DB7C08;
text-shadow:0px -2px 1px #E4C31F,0px -1px 1px #E4C31d;
-moz-border-radius:20px 0px 20px 0px;
-webkit-border-radius:20px 0px 20px 0px;
border-radius:20px 0px 20px 0px;
color:#5F5F60;
-moz-box-shadow:6px 0px 0px 0px #DBB408;
-webkit-box-shadow:6px 0px 0px 0px #DBB408;
box-shadow:6px 0px 0px 0px #DBB408;
background:#EED51C;
background:-webkit-gradient(linear,left top,left bottom,from(#EED51C),to(#E8C84B));
background:-webkit-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-moz-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-o-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-ms-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:linear-gradient(top,#EED51C 0%,#E8C84B 100%);
-moz-transition:all 0.6s ease-out;
-webkit-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
}
#Hr-17 li a:hover {
-moz-border-radius:25px 0px 25px 0px;
-webkit-border-radius:25px 0px 25px 0px;
border-radius:25px 0px 25px 0px;
-moz-box-shadow:inset 0px 0px 50px 0px #14B946;
-webkit-box-shadow:inset 0px 0px 50px 0px #14B946;
box-shadow:inset 0px 0px 50px 0px #14B946;
text-shadow:none;
-moz-transition:all 0.4s ease-in;
-webkit-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;
transition:all 0.4s ease-in;
}
HTML Code
Horizontal menu bar: Style #18
This dynamic horizontal menu bar contains top and bottom borders,which stand as a frame to the menu widget. You can see how this menu bar works by clicking above DEMO button.
CSS Code
#Hr-18 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-18 li {
margin:0;
padding:0;
float:left;
}
#Hr-18 li a {
display:inline;
float:left;
padding:11px 14px;
overflow:hidden;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
border-top:10px solid #c52565;
border-bottom:10px solid #c52565;
color:#2950D0;
font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
background:#A17468;
background:-webkit-gradient(linear,left top,left bottom,from(#97776F),color-stop(0.50 #A17468),to(#BA705E));
background:-webkit-linear-gradient(top,#97776F 0%,#A17468 50%,#BA705E 100%);
background:-moz-linear-gradient(top,#97776F 0%,#A17468 50%,#BA705E 100%);
background:-o-linear-gradient(top,#97776F 0%,#A17468 50%,#BA705E 100%);
background:-ms-linear-gradient(top,#97776F 0%,#A17468 50%,#BA705E 100%);
background:linear-gradient(top,#97776F 0%,#A17468 50%,#BA705E 100%);
-moz-transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
#Hr-18 li a:hover {
background:#BD7811;
-moz-box-shadow:inset 0 0 8px 0 #111;
-webkit-box-shadow:inset 0 0 8px 0 #111;
box-shadow:inset 0 0 8px 0 #111;
-moz-transition:none ;
-webkit-transition:none ;
-o-transition:none ;
transition:none ;
}
HTML Code
Horizontal menu bar: Style #19
This menu widget contains bottom border corners with a gradient background image. Test how this menu design looks like by going to demo page. Want change the appearance of this HTML horizontal navigation menu? Simply replace color values with your own ones.
CSS Code
#Hr-19 {
position:relative;
list-style:none;
margin:3px;
padding:0;
float:left;
}
#Hr-19 li {
margin:0;
padding:0;
float:left;
}
#Hr-19 li a {
overflow:hidden;
display:inline;
float:left;
padding:11px 14px;
text-decoration:none;
text-align:center;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
text-shadow:0 -1px 2px #bbb;
color:#1D19A3;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
border:1px solid #545454;
-moz-border-radius:0 0 16px 16px;
-webkit-border-radius:0 0 16px 16px;
border-radius:0 0 16px 16px;
background:rgba(175,77,194,0.80);
background:-webkit-gradient(linear,left top,left bottom,from(#8F57CB),color-stop(0.40 rgba(175,77,194,0.80)),to(#C24DA1));
background:-webkit-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:-moz-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:-o-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:-ms-linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
background:linear-gradient(top,#8F57CB 0%,rgba(175,77,194,0.80) 40%,#C24DA1 100%);
-moz-transition:all 0.45s ease;
-webkit-transition:all 0.45s ease;
-o-transition:all 0.45s ease;
transition:all 0.45s ease;
}
#Hr-19 li a:hover {
background:yellow;
-moz-box-shadow:inset 0 100px 0 0 #EFB849;
-webkit-box-shadow:inset 0 100px 0 0 #EFB849;
box-shadow:inset 0 100px 0 0 #EFB849;
-moz-transition:all 0.45s ease;
-webkit-transition:all 0.45s ease;
-o-transition:all 0.45s ease;
transition:all 0.45s ease;
}
HTML Code
Horizontal menu bar: Style #20
Like 18th menu bar,this also has two borders. Additionally it shows up an arrow on the top of text when mouse over. Very intuitive menu bar. Isn't it?
CSS Code
#Hr-20 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-20 li {
margin:0;
padding:0;
float:left;
}
#Hr-20 li a {
position:relative;
display:inline;
padding:11px 14px;
overflow:hidden;
text-decoration:none;
text-align:center;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
border-top:5px solid #323233;
border-bottom:5px solid #323233;
text-shadow:0 -1px 1px #bbb;
color:#E9E9F2;
background:#575759;
background:-webkit-gradient(linear,left top,left bottom,from(#3E3E41),color-stop(0.45 #575759),to(#424244));
background:-webkit-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:-moz-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:-o-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:-ms-linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
background:linear-gradient(top,#3E3E41 0%,#575759 45%,#424244 100%);
}
#Hr-20 li a:hover::before {
content:'';
width:0;
height:0;
position:absolute;
top:0;
right:43%;
border-top:11.5px solid #FFCC00;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
}
HTML Code
Horizontal menu bar: Style #21
This is another fancy menu design,which shows up an arrow with a line through different two colors. I suggest you to see the demo to find out how colors are changing and how to change it to your own design.
CSS Code
#Hr-21 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-21 li {
margin:0;
padding:0;
float:left;
}
#Hr-21 li a {
position:relative;
display:inline;
padding:11px 14px;
overflow:hidden;
text-decoration:none;
text-align:center;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#EDAE00;
border-bottom:7px solid #959393;
background:#979393;
background: -webkit-gradient(linear,left top,left bottom,from(#777676),color-stop(0.45 #979393),to(#7B7575));
background:-webkit-linear-gradient(top,#777676 0%,#979393 45%,#7B7575 100%);
background:-moz-linear-gradient(top,#777676 0%,#979393 45%,#7B7575 100%);
background:-o-linear-gradient(top,#777676 0%,#979393 45%,#7B7575 100%);
background:-ms-linear-gradient(top,#777676 0%,#979393 45%,#7B7575 100%);
background:linear-gradient(top,#777676 0%,#979393 45%,#7B7575 100%);
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}
#Hr-21 li:nth-child(2n-1) a:hover {
border-bottom-color:#6889FF;
}
#Hr-21 li:nth-child(2n) a:hover {
border-bottom-color:#FF91A0;
}
#Hr-21 li:nth-child(2n-1) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #6889FF;
right:45%;
bottom:0;
}
#Hr-21 li:nth-child(2n) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF91A0;
right:45%;
bottom:0;
}
#Hr-21 li a:hover {
color:#EEEFEF;
text-shadow:inset 0 0 8px 0 red;
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}
HTML Code
Horizontal menu bar: Style #22
Another simple but an attractive horizontal menu design. Opacity controls over the menu color. If you want a black keyboard style HTML menu bar, try by adding menu bar to your blog. You can see how your conversation rates skyrocket within a few days.
CSS Code
#Hr-22 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-22 li {
margin:0;
padding:0;
float:left;
}
#Hr-22 li a {
position:relative;
display:inline;
padding:12.2px 14px;
overflow:hidden;
text-decoration:none;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#E0E0E0;
-moz-border-radius:24px 24px 0 0;
-webkit-border-radius:24px 24px 0 0;
border-radius:24px 24px 0 0;
-moz-box-shadow:inset 0 0 5px 1px #000000;
-webkit-box-shadow:inset 0 0 5px 1px #000000;
box-shadow:inset:0 0 5px 1px #000000;
-moz-opacity:0.75;
-khtml-opacity:0.75;
filter:alpha(opacity=75);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
opacity:0.75;
background:#393636;
background:-webkit-gradient(linear,left top,left bottom,from(#1B1B1B),color-stop(0.50 #393636),to(#3E3E3E));
background: -moz-linear-gradient(top,#1B1B1B 0%,#393636 50%,#3E3E3E 100%);
background: -webkit-linear-gradient(top,#1B1B1B 0%,#393636 50%,#3E3E3E 100%);
background: -o-linear-gradient(top,#1B1B1B 0%,#393636 50%,#3E3E3E 100%);
background: -ms-linear-gradient(top,#1B1B1B 0%,#393636 50%,#3E3E3E 100%);
background: linear-gradient(top,#1B1B1B 0%,#393636 50%,#3E3E3E 100%);
}
#Hr-22 li a:hover {
-moz-opacity:0.9;
-khtml-opacity:0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:0.9;
}
HTML Code
Horizontal menu bar: Style #23
Because this black color menu bar contains tool-tips which get everyone's attention, I like this menu bar so much. I suggest you to see the example live preview of this HTML menu bar and mouse over on a menu tab to see how tool-tips look.
CSS Code
#Hr-23 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-23 li {
margin:0;
padding:0;
float:left;
}
#Hr-23 li a {
position:relative;
display:inline;
padding:12px 12px;
overflow:hidden;
text-decoration:none;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#E0E0E0;
-moz-border-radius:18px 18px 0 0;
-webkit-border-radius:18px 18px 0 0;
border-radius:18px 18px 0 0;
background:#3C3C3C;
-moz-opacity:0.75;
-khtml-opacity:0.75;
filter:alpha(opacity=75);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
opacity:0.75;
box-shadow:inset 0 0 5px 1px rgba(0,0,0,0.2);
background:-webkit-gradient(linear,left top,left bottom,from(#272727),color-stop(0.35 #424242),color-stop(0.70 #3A3535),to(#302E2E));
background:-webkit-linear-gradient(top,#272727 0%,#424242 35%,#3A3535 70%,#302E2E 100%);
background:-moz-linear-gradient(top,#272727 0%,#424242 35%,#3A3535 70%,#302E2E 100%);
background:-o-linear-gradient(top,#272727 0%,#424242 35%,#3A3535 70%,#302E2E 100%);
background:-ms-linear-gradient(top,#272727 0%,#424242 35%,#3A3535 70%,#302E2E 100%);
background:linear-gradient(top,#272727 0%,#424242 35%,#3A3535 70%,#302E2E 100%);
}
#Hr-23 li a:before {
position:absolute;
content:attr(PBT);
width:auto;
height:20px;
padding:1px 2.9px;
white-space:nowrap;
font-size:12px;
z-index:99;
background:#B3B3B3;
color:black;
top:0;
left:-9999px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
#Hr-23 li a:hover::before {
left:30%;
top:-25px;
}
#Hr-23 li a:after {
position:absolute;
width:0;
height:0;
content:'';
border-style:solid;
border-width:7px 7px 0 7px;
left:-9999px;
top:0;
border-color:#B3B3B3 transparent transparent transparent;
}
#Hr-23 li a:hover::after {
left:39%;
top:-3px;
}
#Hr-23 li a:hover {
-moz-opacity:0.85;
-khtml-opacity:0.85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter:alpha(opacity=85);
opacity:0.85;
}
HTML Code
Horizontal menu bar: Style #24
I used CSS pseudo elements to add a small circle to each menu tabs. It changes its colors when hovering over the menu tabs. If you don't want to see above tool tip, just remove the title attribute from above horizontal HTML navigation bar.
CSS Code
#Hr-24 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-24 li {
margin:0;
padding:0;
float:left;
}
#Hr-24 li a {
position:relative;
display:inline;
padding:12px 12px;
overflow:hidden;
text-decoration:none;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#148108;
text-shadow:0 1px 4px #939391;
-moz-border-radius:16px 16px 0 0;
-webkit-border-radius:16px 16px 0 0;
border-radius:16px 16px 0 0;
-moz-opacity:0.85;
-khtml-opacity:0.85;
filter:alpha(opacity=85);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
opacity:0.85;
border-right:2px solid #C6A022;
background:-webkit-gradient(linear,left top,left bottom,from(#C6A022),color-stop(0.30 #E6AD33),color-stop(0.70 #DD9E17),to(#D89608));
background:-webkit-linear-gradient(top,#C6A022 0%,#E6AD33 30%,#DD9E17 70%,#D89608 100%);
background:-moz-linear-gradient(top,#C6A022 0%,#E6AD33 30%,#DD9E17 70%,#D89608 100%);
background:-linear-linear-gradient(top,#C6A022 0%,#E6AD33 30%,#DD9E17 70%,#D89608 100%);
background:-o-linear-gradient(top,#C6A022 0%,#E6AD33 30%,#DD9E17 70%,#D89608 100%);
background:-ms-linear-gradient(top,#C6A022 0%,#E6AD33 30%,#DD9E17 70%,#D89608 100%);
background:linear-gradient(top,#C6A022 0%,#E6AD33 30%,#DD9E17 70%,#D89608 100%);
}
#Hr-24 li:last-child a {
border-right:none;
}
#Hr-24 li a:before {
content:'';
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#9A4C0F;
bottom:5.5px;
left:50%;
}
#Hr-24 li a:hover::before {
background:#D01F42;
-moz-box-shadow:inset 0 1px 1px rgba(233,233,233,0.5);
-webkit-box-shadow:inset 0 1px 1px rgba(233,233,233,0.5);
box-shadow:inset 0 1px 1px rgba(233,233,233,0.5);
}
#Hr-24 li a:hover {
-moz-opacity:0.95;
-khtml-opacity:0.95;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter:alpha(opacity=95);
opacity:0.95;
}
HTML Code
Horizontal menu bar: Style #25
As you see i have used CSS3 blur and positioning properties to design this horizontal menu. When someone mouse over the menu, it goes up to top and when mouse out,it aligns well.You can control its height and time by changing the CSS code.
CSS Code
#Hr-25 {
position:relative;
list-style:none;
margin:10px;
padding:0;
float:left;
}
#Hr-25 li {
margin:0;
padding:0;
float:left;
}
#Hr-25 li a {
position:relative;
display:inline;
padding:12px 12px;
overflow:hidden;
text-decoration:none;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
text-transform:capitalize;
font-size:26px;
font-weight:bold;
color:#6B2A0A;
border-bottom:1px solid #D39B00;
-moz-border-radius:16px 16px 16px 16px;
-webkit-border-radius:16px 16px 16px 16px;
border-radius:16px 16px 16px 16px;
background:-webkit-gradient(linear,left top,left bottom,from(#BF8913),color-stop(0.30 #F1C826),color-stop(0.70 #EEC025),to(#E2B315));
background:-webkit-linear-gradient(top,#BF8913 0%,#F1C826 30%,#EEC025 70%,#E2B315 100%);
background:-moz-linear-gradient(top,#BF8913 0%,#F1C826 30%,#EEC025 70%,#E2B315 100%);
background:-ms-linear-gradient(top,#BF8913 0%,#F1C826 30%,#EEC025 70%,#E2B315 100%);
background:-o-linear-gradient(top,#BF8913 0%,#F1C826 30%,#EEC025 70%,#E2B315 100%);
background:linear-gradient(top,#BF8913 0%,#F1C826 30%,#EEC025 70%,#E2B315 100%);
-webkit-transition:all 0.63s ease;
-moz-transition:all 0.63s ease;
-o-transition:all 0.63s ease;
transition:all 0.63s ease;
}
#Hr-25 li a:hover {
position:relative;
bottom:15px;
box-shadow:inset 0 0 9px 0 #A35B12;
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
transition:all 0.6s ease;
-webkit-filter: blur(0.45px);
}
HTML Code
Customization
You can change the CSS/HTML code and make many differences to HTML menu bars. Don't forget to remove http://www.problogtricks.com from HTML code and add your site's homepage URL. Also you can add the title or neglect it.
Linking to web pages/PDF files
You can add URL of any web page to the UL list or unordered list easily. Look at below instance.
" title="Pro Blog Tricks">Homehttp://www.problogtricks.com/
- http://www.problogtricks.com/ :- URL of web page, inforgraphic or any other media that you want to link.
- Pro Blog Tricks :- Title of linking media.
- Home :- Text which is shown on menu bar.
Pro Tip for Best Site Linking: Do you want to increase the search traffic by using your HTML menu bar? So do keyword research using one of these top keyword research tools and add a keyword rich anchor text to the menu bar. Search engine crawlers (ex: Googlebot) find the anchor text first than others. (Because of menu bar is located above of post body) Those anchor texts can be found on Google search results. Also known as Site links.
Change Font size and Font color
You can change the font color and font size of your desired horizontal navigation menu bar easily. Find below CSS properties and change them to your own. But, make sure you previewed the menu bar before publishing.
font-size:**px; → adjust the font size:
Available metrics : px, em, pt, mm, cm, in, percentage (e.g: 120%,250%), defining values (small,large,x-large ... etc)
color:#******; or color:black; → change font color:
Available metrics:
- Hex color code values :- color: #00FF00;
- defining the color name :- color: green;
- HSL values :- color :hsl(120%,100%,100);
- HSLA values :- color: hsla(120%,100%,100,0.0);
- RGB values :- color: rgb(00,255,00);
- RGBA values :- color: rgba(00,255,00,0.0);
Color Generators:
Change Height and Width
To change the width and height of menu bar, find below example CSS code and change its value as shown below.
padding:**px **px; or padding:**px **px **px; or padding:**px **px **px **px;
Now change the **px value(s).
Ex:- padding:10px 8px 7px 10px;
Final Words...
Here in this tutorial we discussed what's a navigation menu and how much it is important to maintain a website. I have explained you how to make a menu and change its appearances as we want. I think you like these 25 free menu designs and have chosen a navigation menu for your site.
Above customization section contains some helpful information to customize the horizontal menu designs. These all horizontal navigation templates have specific CSS codes and styles. So If you need any support to customize any navigation menu, don't hesitate to share your problems with me on comment form below.
Meanwhile you'd read this SEO guide to optimize your blog for search engines.
Do you think that this tutorial is helpful ? So don't forget to share this "25 Free CSS Horizontal Navigation Menu bars" tutorial among your friends in Facebook, Google plus, Twitter and StumbleUpon. This will show me how you appreciate my hard works that i dedicated to create these navigation menu bars.
THANK YOU FOR THE INFORMATION .HI GUYS IF YOU SEARCHING FOR SEO Company
ReplyDeletePLEASE VISIT US
SEO company