I found several tutorials explaining how to use sliding doors navigation technique within wordpress navigation, but I was not satisfied with any, since all of them offered solution through the changing php code withing header and wp_list_pages. I will give you here simple and effective solution, with no php additional code required, it’s pure css.
First, you should create (if you didn’t until now) rounded corners images (I called them here “right-li” and “left-li”). First image (right-li) should be longer width (depends how long items in your navigation will be), and second one should be like 15px width.
Once you prepare images, just follow code below (change the names of ID’s or classes)
Example of Sliding Doors technique in WordPress
#navig a{
color: white;
display:block;
float:left;
}
#navig a:hover{
color: white;
background-image: url(images/right-li.jpg);
background-repeat: no-repeat;
background-position: right top;
float:left;
}
ul.navig_ul{
float:right;
width:auto;
}
#navig ul.navig_ul li{
display:inline;
float:left;
width:auto;
margin-left:4px;
padding:0;
text-align:center:
}
ul.navig_ul li:hover{
background-image: url(images/left-li.jpg);
background-repeat: no-repeat;
background-position: left top;
float: right;
}
ul.navig_ul li.current_page_item{
background-image: url(images/left-li.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.navig_ul li.current_page_item a{
background-image: url(images/right-li.jpg);
background-repeat: no-repeat;
background-position: right top;
}
ul.navig_ul li a {
color:#FFFFFF;
display:block;
height:100%;
padding:8px 9px;
text-decoration:none;
}
…and that’s it. It works perfectly in all browsers, even IE6 
.
Cheers!
Why is there no preview of a site using this so that those of us who are a bit unsure with what it is are able to see it and see if we want to incorporate it into our blogs?
Hi, will try to upload some example, if I found some free time. Regards.
Hi,
I would love to see it too if you have the time. Can each image link to a desired page on the website instead of the categories?
Thanks
Hi everybody, finally find a few minutes of free time and updated this post with example of sliding doors technique in WordPress.
@love to see it too
It does not matter will you use it for pages or categories, this is css and you can apply it to all of them: wp_list_pages, wp_list_archives or wp_list_categories.
Cheers!
Great article. There’s a lot of good information here, however I would like to let you know something – I’m using Ubuntu with the current beta of Firefox, and the display of your blog is kind of quirky for me. I could understand the post, but the navigation does not function so good.
I’ve struggled with getting quality info on the best techniques of home improvement that will have the most impact on your home value.
Where is the example showing the result of the CSS code you are writing about? I go to link within the article and it just goes back to the current blog page…thanks
You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!
I’ve been surfing on-line greater than 3 hours nowadays, but I never discovered any fascinating article like yours. It’s pretty value enough for me. In my view, if all site owners and bloggers made just right content as you probably did, the net might be much more useful than ever before. Executive Elite, 18a Greycoat Gardens, Greycoat Street, London, SW1P 2QA, 028 2088 0135
I have been absent for a while, but now I remember why I used to love this site. Thanks , I will try and check back more often. How frequently you update your website? – Elegant London Escorts, 65-67 Brewer Street, Floor: 2, London W1F 9UP. Phone: 020 3011 2941
Thank you a bunch for sharing this with all of us you actually realize what you are talking approximately! Bookmarked. Kindly additionally visit my web site =). We may have a link alternate contract between us
Hello there, might be truly out position nonetheless , too, as being a former looking just about your webblog and it also would look incredibly rather fabulous. I’m building an incredible new web-site at the same time possessing troubles to ensure that it can appear beneficial, when our touch an activity given that i screw it up. The method by which stiff ended up the unique to begin yuor net website? Will maybe an professional in anyway like me without previous practical experience practice it, after which combine your loved ones revise url pages not wrecking this when?
I’m really inspired with your writing abilities as neatly as with the layout for your blog. Is that this a paid topic or did you customize it yourself? Anyway stay up the excellent high quality writing, it is rare to see a great weblog like this one these days..
Hi there, I found your blog by means of Google even as looking for a comparable topic, your website came up, it looks good. I’ve bookmarked it in my google bookmarks.
What¡¯s Happening i’m new to this, I stumbled upon this I have found It absolutely useful and it has helped me out loads. I’m hoping to give a contribution & help other users like its helped me. Great job.
Hi! I know this is somewhat off topic but I was wondering which blog platform are you using for this website? I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be awesome if you could point me in the direction of a good platform.
You can certainly see your expertise within the paintings you write. The sector hopes for more passionate writers such as you who aren’t afraid to mention how they believe. Always go after your heart.
Thanks for the good writeup. It actually was a leisure account it. Look complex to more added agreeable from you! However, how can we keep in touch?
I like Your Article about Sliding doors navigation in WordPress | webmajstor.org Perfect just what I was searching for! .
Couldn’t have said it better myself.
My developer is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the costs. But he’s tryiong none the less. I’ve been using Movable-type on several websites for about a year and am nervous about switching to another platform. I have heard great things about blogengine.net. Is there a way I can transfer all my wordpress posts into it? Any kind of help would be really appreciated!
I’m curious to find out what blog system you are using? I’m experiencing some small security problems with my latest website and I’d like to find something more secure. Do you have any solutions?