Home Unlabelled Create Horizontal Navigation Bill Of Fare Amongst Drib Downwardly Submenus Using Css

Create Horizontal Navigation Bill Of Fare Amongst Drib Downwardly Submenus Using Css

By
Friday, May 18, 2012
Read
Add Comment
This drib downward card made amongst CSS exclusively is a horizontal card amongst sub-tabs together with a rounded search bar on the right side. Influenza A virus subtype H5N1 card similar this tin live handy for users who don't demand complex menus or prefer non to occupation ane that requires scripts and/or likewise many images. Also, the installation together with customization is quite slow and, to locomote past times it off, it is quite functional.

To encounter this CSS drib downward card inwards action, delight catch this demo blog

This drib downward card made amongst CSS exclusively is a horizontal card amongst sub Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

Before changing anything, if yous are using a template available inwards Blogger Template Designer, together with then yous should reckon doing these changes inwards the template, otherwise the card powerfulness non live displayed correctly:

From the Blogger Dashboard, become to Template together with press the "Edit HTML" button:


Search using CTRL + F for the next line:

class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Remove the code inwards red.
You may accept many parts every bit the ane inwards red, delete all yous find.

....then respect a similar notation inwards your template:
/* Tabs
----------------------------------------------- */

Remove all the code yous respect afterwards this notation until yous encounter the Headings part.

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px corporation $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px corporation $(tabs.border.color);
border-bottom: 1px corporation $(tabs.border.color);
border-$startSide: 1px corporation $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px corporation $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Then add together this to where the code has been removed (instead of the code inwards green):
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}
After doing this, nosotros tin finally add together our menu.

How To Add CSS Horizontal Drop Down Menu to Blogger

To add together the CSS horizontal card amongst submenus inwards your blog, follow the side past times side steps:

Step 1. From "Template", become to "Edit HTML" together with but inwards a higher identify ]]> glue the next CSS code:
/* Horizontal drib downward menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px; 
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link bridge {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3GDZ2AMiOrAvYLYJ7VG7YK1tMVxZcyfC82QWiTdTpRLPulmTF7PTIycFYUGRUuK4mlFkx_WYA7zp5wl2vDnifPOEPG7IWhyafOrn1urpQGeJ6TgyHl10yWrMqU95C_CFv9y7e1Ie3VM/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3GDZ2AMiOrAvYLYJ7VG7YK1tMVxZcyfC82QWiTdTpRLPulmTF7PTIycFYUGRUuK4mlFkx_WYA7zp5wl2vDnifPOEPG7IWhyafOrn1urpQGeJ6TgyHl10yWrMqU95C_CFv9y7e1Ie3VM/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2v2ttSVAoTSUKpMbkm5AaLa1yNjug_3WxY53CIWyI2dW9dSuBle9YZ9ucGSBRQcuOestPFXfnT_lUmRny2E69ak-H8EwG6A-58HrppnaKmG6LficggnesIkb5Le5aNr4BWTfodpTucgQ/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}


Screenshot
Step 2. After adding the code, click the "Save Template" button.

Step 3. Go to Layout > click on Add a Gadget link


Step 4. Choose "HTML/JavaScript" together with glue the next HTML code within the empty box:


How to Customize the Navigation Menu

- supplant the text inwards bluish together with crimson amongst your links together with titles.
- if yous demand to a greater extent than tabs, together with then add together a occupation similar this but inwards a higher identify

  • Link URL" class="top_link">Title

    • - if yous desire to add together a tab amongst sub-tabs, together with then add together this code:

  • Link URL" class="top_link">Title


    • - together with if yous desire ane of the other sub-tabs accept sub-tabs together with then take a occupation similar the ane inwards orangish together with alter it to a code similar this:

  • Link URL" class="fly">Submenu Title


    • And that's it... Now "Save" your Widget together with bask this novel CSS drib downward menu!
    Tags :

    Created By Nexus · Powered by Blogger
    © All Rights Reserved

    Terms Of Service · Privacy Policy · Disclaimer · Contact Us · About Us