Tabbed Menu for the SmallBiz Theme
Question:
How can I create a tabbed menu?
Option 1 – Tabs
Option 2 – Flat
Answer:
The following tabbed menu example is intended for users with CSS experience.
The menu utilizes CSS3 elements – older browsers and IE may not be able to display the tabs correctly. The CSS may interfere with your Submenu. Use at your own discretion.
Option 1)
A different gradient color css for the tabs can be generated here: http://gradients.glrzad.com/
Expand2Web is not affiliated with http://gradients.glrzad.com/ – we cannot support or guarantee for the generated css.
1) Log into WordPress
2) Click on “Appearance” -> “Editor”
3) A file called “style.css” should load by default. If not select it from the bottom of the file list on the right.
4) Type or copy/paste the following:
#access {
height: 35px;
border-radius:0px;
}
#access ul li {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 11px;
padding-right: 11px;
margin-right: 7px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background-image: linear-gradient(bottom, rgb(119,129,133) 36%, rgb(188,199,204) 68%);
background-image: -o-linear-gradient(bottom, rgb(119,129,133) 36%, rgb(188,199,204) 68%);
background-image: -moz-linear-gradient(bottom, rgb(119,129,133) 36%, rgb(188,199,204) 68%);
background-image: -webkit-linear-gradient(bottom, rgb(119,129,133) 36%, rgb(188,199,204) 68%);
background-image: -ms-linear-gradient(bottom, rgb(119,129,133) 36%, rgb(188,199,204) 68%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.36, rgb(119,129,133)),color-stop(0.68, rgb(188,199,204)));
}
_____________________________________________________________________________________
Option 2)
Replace the hex color number with a color of your own choice.
#access ul li{
margin-right: -7px;
margin-top: -7px;
padding: 7px;
}
#access a{
margin-top: -6px;
padding: 7px;
}
#access li:hover > a{
background-color:#777777;
margin-top: -7px;
padding-top: 7px;
padding: 7px;
}
#access ul :hover > a {
background-color:#777777;
margin-top: -7px;
padding: 7px;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
background-color:#777777;
margin-top: -7px;
padding: 7px;
}
