PDA

View Full Version : How to make horizontal menus with horizontal Sub Menus in css



sultanrazashah
Jan 9th, 2011, 05:52 AM
Hello Friends

I am trying to make Horizontal Menus with Horizontals Sub menu but unable to do it because of my limited knowledge in css Can any one guide me how to do it ?

regards

dbrekelmans
Jan 9th, 2011, 10:03 AM
http://cssmenumaker.com/horizontal_css_menu.php

Download one of these.
Look at the code.
Try to understand it.

Google is a great place for finding things like these.

sultanrazashah
Jan 10th, 2011, 05:53 AM
Thanks for the help. But actually i am trying to make SUB MENUS Horizontally in a horizontal Menu . Not just horizontal menu .

Excavator
Jan 10th, 2011, 06:34 AM
Hello sultanrazashah,
Here's a pretty simple one - http://nopeople.com/CSS%20tips/new_empty-menu18_dropdown-flyout/index.html

In many of the menus dbrekelmans linked you to (http://cssmenumaker.com/drop_down_css_menu.php) all that's needed is some different styling. Remove the width on the child ul and the float on the dropped li's and it's horizontal instead of vertical.

sultanrazashah
Jan 10th, 2011, 01:15 PM
Thanks Guys . really helped me alot .

http://www.junctionz.net/admin5/sub_menu/ here is what i am working on but now i want that when i click its show the sub menu then . not on hover but on click what i suppose to do ?

regards

abduraooft
Jan 10th, 2011, 03:05 PM
not on hover but on click what i suppose to do ?

/*ul#topnav li:hover span { display: block; color:#000000; }*/

<script type="text/javascript">
$(document).ready(function() {

$("ul#topnav li").click(function() { //Hover over event on list item
$("ul#topnav li").css({ 'background' : 'none'});
$("ul#topnav li").find("span").hide(); //Hide the subnav
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
});

});
</script>

sultanrazashah
Jan 11th, 2011, 06:48 AM
abduraooft .... I love you for that !!!!!!!!!!!