Menu Styling with Typography CSS3
By default the Semiomantics XO Theme displays the following Main Navigation displaying category names:
Click to view
In order to style the menu and namely the typography, it is advisable to start by creating the tabs using the WordPress Custom Menu feature from the Dashboard under Appearance.
My plan is to create a minimalist typography focused WordPress theme.
Create your Menu
For the purpose of this demo we will create the following menu tabs:
- Home (We will create a custom Home Frontpage)
- Contact
- Typography
- Blog
- News (will contain a news feed from my author blog)
- Get XO (Link to Semiomantics)
Add some style to the background and tabs
For the purpose of this demo I will create a menu with a gradient background and a border with rounded corners and a discrete hover effect using the custom style sheet from the child theme.
The XO Theme has a background set on the main-navigation div -we get rid of it as we will stretch the tabs over 100% f the width.
.main-navigation {
background:none !important;
}
Now we will apply some linear gradient in the light gray shades with an angle of 270 degrees:
.main-navigation .sf-menu a, .main-navigation .sf-menu a:visited {
background:-moz-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
}
Now, we will add a border to the tabs which is in style with our gradient to end with:
.main-navigation .sf-menu a, .main-navigation .sf-menu a:visited {
background:-moz-linear-gradient(270deg, #FCFCFC, #ECECEC);
border-color: #EAEAEA #F5F5F5 #F5F5F5;
border-radius: 3px 3px 3px 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
position: relative;
}
Note the box shadow with an offset down of 1px and a glow of 1px and the transparency achieved with the rgba color-code, whereas the 0.2 stands for the opacity (alpha channel).
We want to make this style compatible with the most popular browsers and style the hover effect at the same time:
.main-navigation .sf-menu a, .main-navigation .sf-menu a:visited {
background: -moz-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
-pie-background: linear-gradient(#FCFCFC, #ECECEC);
border-color: #EAEAEA #F5F5F5 #F5F5F5 #F5F5F5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-pie-box-shadow: 0 1px 1px #ccc;
position: relative;
text-transform:uppercase;
behavior: url("http://typography.ycademy.net/wp-content/themes/typography/PIE.php");
}
.main-navigation .sf-menu li.sfHover,
.main-navigation .sf-menu li li,
.main-navigation .sf-menu li li li,
.main-navigation .sf-menu a:focus,
.main-navigation .sf-menu a:hover{
background: -moz-linear-gradient(270deg, #FFFFFF, #222222) repeat scroll 0 0 transparent !important;
background: -webkit-linear-gradient(270deg, #FFFFFF, #222222) repeat scroll 0 0 transparent !important;
-pie-background: linear-gradient(#FFFFFF, #222222);
color:#FFFFFF !important;
behavior: url("http://typography.ycademy.net/wp-content/themes/typography/PIE.php");
}
Note: we are using PIE to assure display in IE; the PIE scripts(htc version) have been added to the child theme.
At this stage we have finished styling the menu bar which displays now as follows:
Click to view
Font Styling with CSS3
Let’s take care of our fonts now and stretch the menu bar over 100% of the width. Instead of stretching the boxes we will introduce letter spacing.
First we force upper cases and decide about the typefaces (serif or non-serif fonts). Fonts and font size are chosen from the XO options panel:
Click to view
Then we introduce letter spacing:
.main-navigation {
text-transform:uppercase;
letter-spacing:12.4px;
}
We get the following:
Click to view
We can play now with different fonts and sizes to style the menu to taste.
Here an example with ChunkFive 18px and line spacing of 9.6px:
Click to view
How about using one of my preferred fonts, Yorgo 28 px with letter spacing of 9.4px?
Click to view
Looks pretty sweet in IE 10 as well :-) :
CSS3 Styles in IE 10
By the way: this menu is visible on the iPhone without zooming …
Click to view
In order to get off the monochromatic minimalism, just add color to fonts, backgrounds and borders and you can design a nice rain-bow menu and theme :-).
No related posts.
