How to create an horizontal menu in the header with a Kubrick theme
October 29th, 2006 tela
The same question came up several times in the comments for the Sticky Menu plugin for Wordpress so I decided to write a post specifically for that.
The question is: How to style the menu created with the plugin Sticky Menu, so that it displays as horizontal tabs?
What’s more I noticed that several ones encountered a problem positioning the menu inside the header when using the Kubrick theme, that is the WordPress default theme.
So here is a step by step guide that will help you to create an horizontal menu using Sticky Menu with a Kubrick theme.
Here it is what we’ll get:
Once you have installed the Sticky Menu plugin and created the menu under Manage | Sticky Menus, you need to put the Sticky Menu code inside your template file where you want the menu to display:
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>What you need to know is that the code of the Sticky Menu plugin outputs a HTML list with each menu item. Something like this:
<li><a href="/" title="Home">Home</a></li>
<li><a href="/about/" title="About">About</a></li>
<li><a href="/archives/" title="Archives">Archives</a></li>
<li><a href="/links/" title="Links">Links</a></li>
<li><a href="/contact/" title="Contact">Contact</a></li>So that the menu displays correctly, the first thing you need to do is to wrap the Sticky Menu code with the tags <ul></ul>:
<ul>
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>
</ul>So let’s open the file header.php and add the code for the plugin Sticky Menu.
The key here is: don’t put the code inside the <div id="header"></div> but right after it:
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<ul>
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>
</ul>
<hr />
The menu displays as a simple vertical bullet list:
It definitely needs some styling! As I previously commented you can find some very good code sample to style the list on this website: http://css.maxdesign.com.au/listamatic/.
So let’s try to implement this rollover horizontal list: http://css.maxdesign.com.au/listamatic/horizontal02.htm.
Let’s add a CSS selector -id="navlist"- to the tag <ul></ul> and wrap the list with <div id="container"></div>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>
</ul>
</div>
<hr />
If you test the page now, you’ll get the same result as before. Of course! You need to add the CSS code in your stylesheet.
Open style.css. Add the code you find in http://css.maxdesign.com.au/listamatic/horizontal02.htm:
/* Begin Sticky Menu styles */
ul#navlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
ul#navlist li {
display: inline;
list-style-type: none;
}
ul#navlist li a { padding: 3px 10px; }
ul#navlist li a:link, ul#navlist li a:visited {
background-color: #036;
color: #fff;
text-decoration: none;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
text-decoration: none;
}
/* End Sticky Menu styles */So now we have an horizontal menu:
It’s not yet positioned where we want it to. To have a better control on how we position the menu and to make sure we have the same result on Firefox and Internet Explorer we’ll need to make a few changes on the Listamatic code.
We reset every margin and padding of ul#navlist to 0, not only margin-left and padding-left:
ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
}We add some negative margin-top on the <div id="container"></div> to put it higher in the header. As we reset the margin of <ul></ul> we need to add some margin-bottom. And finally we center the menu in the page.
div#navcontainer {
margin-top:-27px;
margin-bottom:20px;
text-align: center;
}We’re almost done!
As a final touch you can now add some margin and padding on <li> and <a> to style the menu items further.
And here is the final CSS code:
/* Begin Sticky Menu styles */
div#navcontainer {
margin-top:-27px;
margin-bottom:20px;
text-align: center;
}
ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
}
ul#navlist li {
display: inline;
list-style-type: none;
margin: 0 2px;
}
ul#navlist li a {
padding: 10px;
}
ul#navlist li a:link, ul#navlist li a:visited {
background-color: #036;
color: #fff;
text-decoration: none;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
text-decoration: none;
}
/* End Sticky Menu styles */Hope this help all of you that wanted to put an horizontal menu in the header in a Kubrick theme.
Entry Filed under: WordPress plugins
20 Comments Add your own
Pages: [2] 1 »
20. 9 Things to consider befo&hellip | May 17th, 2008 at 4:49 am
[…] How to Create A Horizontal Menu […]
19. JJ | April 18th, 2008 at 7:53 am
Hi guys,
I have created the top menu. But I wish to know how can I make a drop down menu ?
Please can anyone advise ?
Thanks.
18. Mark Thomas Gazels webste&hellip | April 6th, 2008 at 2:34 pm
[…] Tela-Web » How to create an horizontal menu in the header with a Kubrick theme Lav en vertikal menu i Kubrick. Det har på fornemmelsen jeg snart får brug for. (tags: wordpress design themes navigation menu) […]
17. tela | February 15th, 2008 at 5:23 am
To insert a rel=”nofollow” to the links you need to make a modification inside the code of the Sticky Menu plugin.
Open stickymenu.php, look for the line:
$output .= '<li><a href="'.$item['link'].'" title="'.$item['name'].'">'.$item['name'].'</a></li>'."\n";and replace it with:
$output .= '<li><a rel="nofollow" href="'.$item['link'].'" title="'.$item['name'].'">'.$item['name'].'</a></li>'."\n";16. Money Blue Book | February 14th, 2008 at 11:56 pm
Does anyone know how to insert a rel=”nofollow” to the links in the Sticky Menu? Please email me. Thanks!
15. shipster | September 22nd, 2007 at 9:30 pm
to help,i’ve added the link called ‘example” on the right hand side,so you can see the link display” example “
14. shipster | September 22nd, 2007 at 9:28 pm
Hi,i’m not very good with code, but i did the part with your horizontal sticky part. So far the links work but i need help displaying it on the right side. As of right now,you can see home and about in the right hand section of the header. That’s where i’d like my sticky to go but right now it’s currently underneath the picture in the header and you can’t see it at all. How do i replace the (home,about section) and have my horizontal section go into the image on the right?
13. tela | July 2nd, 2007 at 7:18 am
I visited your website. Looks like you found out by yourself how to change the colors.
Anyway here are the lines to change:
ul#navlist li a:link, ul#navlist li a:visited { background-color: #036; color: #fff; } ul#navlist li a:hover { background-color: #369; color: #fff; }12. wickedawesomeful | July 2nd, 2007 at 6:39 am
Can I change the colors of the menu buttons?
11. Tommy | April 29th, 2007 at 1:27 pm
Thanks Tela, I simply copied and pasted the code found on this webpage. Could I be a pain and ask if I could email you my template to see what the issue it?
Pages: [2] 1 »
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed