CSS Library: Horizontal CSS Menus: Here
CSS Indent Menu
Author: Dynamic Drive
Using two gradient background images, this horizontal CSS menu makes the active/ selected menu item appear indented. The width of the menu is set to 80% of its container in the demo .The entire menu markup plus images combined comes in at a very lean 2.5kb.
Demo:
The two image used:
The CSS:
Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.
Comment Pages 2 of 5 pages < 1 2 3 4 > Last »
Great idea. Nice work. Am trying it on a web I'm putting together for my daughter's shop. Thanks.
Elegant and effect - excellent! Thank you - µ
I am only able to shift text left or right, but am unable to center the text (links) in mt data cell. Any tricks other than using a clear image spacer?
Hi,
I am new to css . I found this nci,e menu and i want to use it. i have a question though.
The menu i have using this template is about 60% of the width of the page. I've exnted it to 100% but of course some of the right side is empty.
I'd like to place a google search box there but for some reason the box is always under the menu . Any suggestion on how i can do that ? I've got this code so far which works fine .. it just does not display the search box where I want it :
<div id = "navbar">
<div class="indentmenu">
<ul>
<li>Home</li>
<li>Globus 360</li>
<li>Consultancy</li>
<li>Development</li>
<li>Advisory</li>
<li>Partners</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="search" id="search" width: 100% >
<!-- Google CSE Search Box Begins -->
<form action="search.html" id="searchbox_009687674107278498736:g58svkeirbu">
<input type="hidden" name="cx" value="009687674107278498736:g58svkeirbu" >
<input type="hidden" name="cof" value="FORID:11" >
<input type="text" name="q" size="25" >
<input type="submit" name="sa" value="Search" >
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_009687674107278498736%3Ag58svkeirbu"></script>
<!-- Google CSE Search Box Ends -->
</div> <!-- <br style="clear: left" > -->
</div>
</div>
<!-- end navbar -->
I am new to css . I found this nci,e menu and i want to use it. i have a question though.
The menu i have using this template is about 60% of the width of the page. I've exnted it to 100% but of course some of the right side is empty.
I'd like to place a google search box there but for some reason the box is always under the menu . Any suggestion on how i can do that ? I've got this code so far which works fine .. it just does not display the search box where I want it :
<div id = "navbar">
<div class="indentmenu">
<ul>
<li>Home</li>
<li>Globus 360</li>
<li>Consultancy</li>
<li>Development</li>
<li>Advisory</li>
<li>Partners</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="search" id="search" width: 100% >
<!-- Google CSE Search Box Begins -->
<form action="search.html" id="searchbox_009687674107278498736:g58svkeirbu">
<input type="hidden" name="cx" value="009687674107278498736:g58svkeirbu" >
<input type="hidden" name="cof" value="FORID:11" >
<input type="text" name="q" size="25" >
<input type="submit" name="sa" value="Search" >
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_009687674107278498736%3Ag58svkeirbu"></script>
<!-- Google CSE Search Box Ends -->
</div> <!-- <br style="clear: left" > -->
</div>
</div>
<!-- end navbar -->
I am using this menu on this site. It works out pretty good for an alphabetical index. Of course I have changes the default images to blend with the site colors, but I think this is so simple and straightforward, and the effect really looks great. Just a simple shift down and inversion of the graphics. Thanks SO MUCH!
i want to learn java script
Hello this is quite classic menu, Just right i like, i just don't know how can i get images????? To build the menu.
Ass vitor Sousa
Ass vitor Sousa
Hello All:
I am using this wonderful menu for one of my websites.
Question:
How can I make sure the menu does not wrap to next line, when window is resized? Now when resized menu wraps to fit the window size and does not look good.
Any help is greatly appreciated.
Thanks
Tom
I am using this wonderful menu for one of my websites.
Question:
How can I make sure the menu does not wrap to next line, when window is resized? Now when resized menu wraps to fit the window size and does not look good.
Any help is greatly appreciated.
Thanks
Tom
As simple as this is, I am having browswer issues with the font.
Is that possible to add a partition between each button. So there will be a separator between each button.
