Horizontal menu with sub-tabs in two columns for Blogger

It's a great horizontal menu that displays tabs in two columns, and it's also built with no-script CSS.

The "advantage" is that, arranged in two columns, the tabs are not so long, so they take up less space. You can see an example here.

• Box 1 title is here.
• Sheet 2 topic here
• File header 3 here
  • Subsection 3.1
  • Subsection 3.2
  • Subsection 3.3
  • Subsection 3.4
  • Subsection 3.5
  • Subsection 3.6
• File header 4 here
  • Subsection 4.1
  • Subsection 4.2
  • Subsection 4.3
  • Subsection 4.4
  • Subsection 4.5
  • Subsection 4.6
• File header 5 here
  • Subsection 5.1
  • Subsection 5.2
  • Subsection 5.3
  • Subsection 5.4
  • Subsection 5.5
  • Subsection 5.6
  • Subsection 5.7
  • Subsection 5.8
• Box 6 subject here

Added a two column horizontal menu with Blogger tabs

Step 1: Go to Blogger Layouts and Page Elements.

• Click the Add Widget link below the header image.
• Select the " HTML/JavaScript " option from the list of widgets.

Step 2 Copy and paste the entire code into your widget. Note: Leave the Title field of this widget blank.

• Box 1 title is here.


• Sheet 2 topic here


• File header 3 here
  
  
  
  • Subsection 3.1
  
  
  • Subsection 3.2
  
  
  • Subsection 3.3
  
  
  • Subsection 3.4
  
  
  • Subsection 3.5
  
  
  • Subsection 3.6
  
  
  
  


• File header 4 here
  
  
  
  • Subsection 4.1
  
  
  • Subsection 4.2
  
  
  • Subsection 4.3
  
  
  • Subsection 4.4
  
  
  • Subsection 4.5
  
  
  • Subsection 4.6
  
  
  
  


• File header 5 here
  
  
  
  • Subsection 5.1
  
  
  • Subsection 5.2
  
  
  • Subsection 5.3
  
  
  • Subsection 5.4
  
  
  • Subsection 5.5
  
  
  • Subsection 5.6
  
  
  • Subsection 5.7
  
  
  • Subsection 5.8
  
  
  
  


• Box 6 subject here

Customize the main tabs by changing the tab titles to your liking. Enter a URL for each if you want them to be "clickable". If not, you can # login at http://YOUR URL HERE.com .

You can add or remove as many main boards as you like, just make sure you copy all the code for the additional board you want.

Tab 7 header here

• Subsection 7.1


• Subsection 7.2


• Subsection 7.3

Step 3 Now let's take it a step further and add CSS styles to our template.

• Go to Template > Edit HTML

• Click on the side arrow ...

• Then click anywhere in the code area and search using CTRL+F, ]]> Mark and above ]]> Add this code

/* Horizontal menu with 2 columns
-------------------------------------------------- --- ---- */
#menukol {
Width: 940px;
height: 37px;
wallpaper \ Background image. -moz-linear-gradient(top, #666666, #000000);
wallpaper \ Background image.
Filter: progid:DXImageTransform.Microsoft.Gradient (gradientType=0,startColorStr=#666666,endColorStr=#000000);
bottom border: 1px solid #666666;
top-border: 1px solid #666666;
margin: 0 heads; load: automatic 0;
abundant - hidden;
}
# upper wrap {
Width: 940px;
height: 40px;
Margin: 0 Automatic;
card:0 car;
}
pure {
simple Both;
Height: 0;
row height: 0.0;
font size: 0;
}
# per day {
Width: 100%;
}
#higher, #higher
card: 0;
the margin 0;
Menu style: no;
}
# Hardening
border-right: 1px solid #333333;
text-align: left;
screen lock;
Text format: no;
card: 10px 12px 11px;
Font: Bold, Arial, 14px;
Text editing: no;
Color: #ee;
}
# enabled: pass {
background: #000000;
Color: #F6F6F6;
}
#top.submenu {
background image: URL (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5j91bfp3b5jdFXZvIJvoqucYqVa9TuXNb8WNIgg11Mmb6Xt4jOKtAUOR2ANg3c_loCBmFYAHdYow2jIA9_NYePIt_YWBWWZfn5rYRaHh_Ctab7hdRFYHRBLdxzwoW20o9mWsldrWH7I/s1600/arrow_white.gif);
background playback. no repetition;
card: 10px 24px 11px 12px;
back position - center right;
}
# per day {
Swim left;
Location: relative;
}
# per day {
location: static !required;
Chassis: automatic;
}
#go or money, #go ul li {
width: 300px;
}
# on the top
text-align: left;
padding: 6px by 15px;
font size: 13px;
font-weight: normal;
Text editing: no;
Font family: Arial, sans-serif;
Limit: no;
}
# on the top
z-index: 100;
Place: absolute;
Exposure: no;
background color: #F1F1F1;
left margin: -80px;
padding: 10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0,6);
filter: alpha (opacity = 87);
Purity: 0.87;
}
# on the top
width: 150px;
Swim left;
the margin 0;
Tabs: 0;
}
#on:hover ul, #on li.hvr ul {
screen lock;
}
#top: pass ul a, #top li. hvr ul a {
Color: #333;
background color: transparent;
text format: no;
}
#up: pass {
text format: string! want;
color: #444444 !important;
}

• Now find this line (CTRL + F).

/* weave

• It will also have some small lines on the bottom.

/* weave
-------------------------------------------------- --- ---- */

• And below those little lines, delete the code below until you get to:

/* pillars
-------------------------------------------------- --- ---- */

• Add this instead of the removed code:

#cross ul { z-index : 200; payload: 0 !required;}
#cross li:pass {position:relative;}
#crosscol ul li {padding:0 !required;}
.tabs-outter {z-index: 1;}
.tabs-in { padding: 0 0px; }

See this screenshot for more information.

Step 4 : The last step is to save the model and that's it.

Visit your blog to see a nice navigation menu under the header.
If you have any questions or need help, leave a comment below.