virtualadz Posted May 11, 2006 Share Posted May 11, 2006 hi , i have this menu and want to make it a drop-down one, but dont know how to. i have this code of the menu just save it as html and see the result: is there anyone who can add a drop-down menu to it, i want no modifications to be done as it is going to be converted to php , so all modifications should be in css/ js<style> .menu { color: white; font-family: Tahoma; font-size: 8pt; font-weight: bold; border-right: 1px solid white; text-decoration: none; background-color: #313031; padding: 5px;}.menu:hover { background-color: #5A8EC6;}.toolbar { background-color: #313031; padding: 5px 0px 5px 0px; width: 475px;}</style><div class=toolbar><a class=menu href="menu1.html" title="Tea & Health"> Our Products</a><a class=menu href="menu1.html" title="Tea & Health"> Tea & Health</a><a class=menu href="menu1.html" title="Visit Menu Item 2"> T Zone</a><a class=menu href="menu1.html" title="Tea & Health"> Tea History</a><a class=menu href="menu1.html" title="Tea & Health"> Tools</a><a class=menu href="menu1.html"> Info Center</a><a class=menu href="menu1.html"> About</a></div> Link to comment Share on other sites More sharing options...
scott100 Posted May 11, 2006 Share Posted May 11, 2006 Well you've not got very far so i would suggest just taking a complete one from the net and modifying it.Pure css dropdown: http://www.cssplay.co.uk/menus/dd_valid.htmldhtml dropdown: http://www.w3schools.com/dhtml/tryit.asp?f...trydhtml_menu10 Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 but i i would like to have a drop-down with this only, is there a possible easy to do it via ul li etc. please do tell anything important as i nedd it Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 but i i would like to have a drop-down with this only, is there a possible easy to do it via ul li etc. please do tell anything important as i nedd it<{POST_SNAPBACK}> All you need to do is take one of the above and change the styles/options to your ownYou can customise them however you like Link to comment Share on other sites More sharing options...
Jonas Posted May 13, 2006 Share Posted May 13, 2006 http://www.cssplay.co.uk/menus/css/dropdown.csshttp://www.cssplay.co.uk/menus/css/dropdown_ie.csshttp://www.cssplay.co.uk/menus/css/dropdown.txtLook at those links. There's the xhtml and css necessary for the menu to work. You can edit the xhtml by removing parts from the dropdown menu, changing href's and linktext, changing colour and background colour in the css, etc. Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 ok so i did took one of them now the difficulty i am facing is how do i reduce it's height here is the code for it: please see it live at www.virtualadz.com , i want to reduce the menu's height but am not finding the possible code, please take the css from my site itselfhttp://www.virtualadz.com/basic_dd.csshttp://www.virtualadz.com/basic_dd_ie.cssany help would be great. Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 hey i have successfully decreased it's height, but now one more problem is eating my brain: how do i make the width of the submenu increase, if i increase it , then it becomes two part side by side, there is not much space in there to fill my titles in the sub menus, so is there a way i can increase safely both in IE and FF, hope it is clearhttp://www.virtualadz.com/ Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 Your just adding width to that li - WIDTH: 190px; or whateverbasic_dd .menu { MARGIN: 0px; WIDTH: 750px; FONT-FAMILY: arial, sans-serif}.menu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}.menu UL LI { FLOAT: left; POSITION: relative}.menu UL LI A { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #a8a8a8; BORDER-LEFT: #fff 0px solid; WIDTH: 90px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none}.menu UL LI A:visited { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #a8a8a8; BORDER-LEFT: #fff 0px solid; WIDTH: 90px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none}.menu UL LI UL { DISPLAY: none}.menu UL LI:hover A { BACKGROUND: #6495ed; COLOR: #fff}.menu UL LI:hover UL { DISPLAY: block; LEFT: 0px; WIDTH: 105px; POSITION: absolute; TOP: 21px}.menu UL LI:hover UL LI A { DISPLAY: block; BACKGROUND: #a8a8a8; COLOR: #fff;WIDTH: 190px;}.menu UL LI:hover UL LI A:hover { BACKGROUND: #6495ed; COLOR: #fff} basic_dd_ie TABLE { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse}.menu UL LI A.hide { DISPLAY: none}.menu UL LI A.hide:visited { DISPLAY: none}.menu UL LI A:hover { BACKGROUND: #6495ed; COLOR: #fff}.menu UL LI A:hover UL { DISPLAY: block; LEFT: 0px; WIDTH: 155px; POSITION: absolute; TOP: 22px}.menu UL LI A:hover UL LI A { BACKGROUND: #a8a8a8; COLOR: #fff;WIDTH: 190px;}.menu UL LI A:hover UL LI A:hover { BACKGROUND: #6495ed; COLOR: #fff} Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 (edited) hey i have changed the width of menu successfullt and now want to change the wdith of the sub-menu: code for basic_dd.css /* common styling *//* set up the overall width of the menu div, the font and the margins */.menu {font-family: arial, sans-serif; width:750px; margin:0; margin:0px 0;}/* remove the bullets and set the margin and padding to zero for the unordered list */.menu ul {padding:0; margin:0;list-style-type: none;}/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */.menu ul li {float:left; position:relative;}/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */.menu ul li a, .menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:90px; height:20px; color:#fff;font-weight: bold;border:1px solid #fff;border-width:1px 1px 0 0;background:#A8A8A8; line-height:20px; font-size:11px;}/* make the dropdown ul invisible */.menu ul li ul {display: none;}/* specific to non IE browsers *//* set the background and foreground color of the main menu li on hover */.menu ul li:hover a {color:#fff; background:#6495ED;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}/* style the background and foreground color of the submenu links */.menu ul li:hover ul li a {display:block; background:#A8A8A8; color:#fff;}/* style the background and forground colors of the links on hover */.menu ul li:hover ul li a:hover {background:#6495ED; color:#fff;}code for basic_dd.ie.css/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover *//* Get rid of any default table style */table {border-collapse:collapse;margin:0; padding:0;}/* ignore the link used by 'other browsers' */.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}/* set the background and foreground color of the main menu link on hover */.menu ul li a:hover {color:#fff; background:#6495ED;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li a:hover ul {display:block; position:absolute; top:22px; left:0; width:105px;}/* style the background and foreground color of the submenu links */.menu ul li a:hover ul li a {background:#A8A8A8; color:#fff;}/* style the background and forground colors of the links on hover */.menu ul li a:hover ul li a:hover {background:#6495ED; color:#fff;} Edited May 16, 2006 by Jonas Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 The code i pasted above changes the width of the submenu http://scott100.atspace.com/cross-browser%20menu.htm Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 this page http://scott100.atspace.com/cross-browser%20menu.htm does open"Cannot find server" . i want the submenu width increased to the half of the second menu, please correct your page's error while i try your code Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 hey it worked well, but i think there think there might be some trouble in differences with IE & FF, do you have them both installed , if so could you please check it would be a great relief.one more thing i will change the code of the source to PHP so is it going to create problems doing thanksas i said there could be some trouble there is it , just add some text before and after it and it shows in differant way in IE and FF,is added text<br> above the menu --worked well in IE & FFi added text after </div> worked well with IE but not FF Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 Did you change both style sheets? there is an individaul one for IE because of it's problems.This works exact same in IE, FF and Operahttp://scott100.atspace.com/menu.htm Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 (edited) your page again could not be found http://scott100.atspace.com/menu.htmas i said i edited both css but this problem have a lookas i said there could be some trouble there is it , just add some text before and after it and it shows in differant way in IE and FF,is added text<br> above the menu --worked well in IE & FFi added text after </div> worked well with IE but not FF , in IE it shows below the menu as if <br> is added (but it is not added) and in FF the text shows along with the menu , but if i add <br> then there comes two extra lines like a <p> , just see the code for the page source <html><head><title>cross-browser menu</title><link rel="stylesheet" media="all" type="text/css" href="basic_dd.css" /><!--[if lte IE 6]><link rel="stylesheet" media="all" type="text/css" href="basic_dd_ie.css" /><![endif]--></head><body>damd<br><div class="menu"><ul><li><a class="hide" href="../menu/index.html">Our Products</a><!--[if lte IE 6]><a href="../menu/index.html">Our Products<table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="index.html">Tea & Health</a><!--[if lte IE 6]><a href="index.html">Tea & Health<table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><!--[if lte IE 6]><a href="../layouts/index.html">LAYOUTS<table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../boxes/index.html">BOXES</a><!--[if lte IE 6]><a href="../boxes/index.html">BOXES<table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><!--[if lte IE 6]><a href="../mozilla/index.html">MOZILLA<table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../ie/index.html">EXPLORER</a><!--[if lte IE 6]><a href="../ie/index.html">EXPLORER<table><tr><td><![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../opacity/index.html">OPACITY</a><!--[if lte IE 6]><a href="../opacity/index.html">OPACITY<table><tr><td><![endif]--> <ul> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul><!--[if lte IE 6]></td></trc></table></a><![endif]--></li></ul><div class="clear"> </div></div>dskdk</body></html> Edited May 16, 2006 by Jonas Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 Ok i'm not sure why you can't see my page it's working ok for me Can you confirm that the menu is working and doing what you want before jumping onto other problems, is the submenu width problem now fixed?ok as for the text appearing different in IE and FF it's because IE is automatically adding a break and FF is not.If you add paragraph tags around the text then it will work fine in both browsers<p>dskdk</p> Link to comment Share on other sites More sharing options...
virtualadz Posted May 13, 2006 Author Share Posted May 13, 2006 1. sub-menu problem fixed ----thanks2. about line space: using <p> adds a extra line i dont want that , and the problem even gets bigger when replacing <p> with <br>, they both are doing the same function. is there a way i can added bottom border : 5px and then add no p and br, if you had IE and FF then it would have been easy to understand, but still let's see what happens Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 I do have IE and FF and see what your talking about, have you had any luck with it yet? i haven't Link to comment Share on other sites More sharing options...
virtualadz Posted May 14, 2006 Author Share Posted May 14, 2006 (edited) no i couldn't yet solve the problem, i had a css menu but that was not drop-down however see that menu's code for reference: live at. www.bhuratea.com , hope you find the answer .menunav { color: #FFFFFF; font-family: arial; font-size: 9pt; font-weight: bold; border-right: 1px solid white; text-decoration: none; background-color: #A8A8A8; padding: 5px;}.menunav:hover { background-color: #6495ED;/*filter:Alpha(Opacity=50, Style=0);*/}.toolbar { background-color: #FFFFFF; padding: 5px 0px 6px 0px; width: 650px;/*filter:Alpha(Opacity=50, Style=0);*/}a.menunav:hover { color: #FFFFFF; Edited May 16, 2006 by Jonas Link to comment Share on other sites More sharing options...
virtualadz Posted May 14, 2006 Author Share Posted May 14, 2006 (edited) hey i found the solution to the text problem, just made it in a table , and things worke out automatically, now what i need is to convert the html to php, HTML CODE<div class="menu"><ul><li><a class="hide" href="../menu/index.html">Our Products</a><!--[if lte IE 6]><a href="../menu/index.html">Our Products<table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">Darjeeling Tea</a></li> i made it a little like but couldn't fin where to insert the title of the html , hope you doPHP CODE:<div class="menu"><ul><li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>" class="hide"><?php echo MENU_PRODUCTS; ?></a><!--[if lte IE 6]><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo MENU_PRODUCTS; ?><table><tr><td><![endif]--><ul> <li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>" title="The zero dollar ads page" ><?php echo MENU_TEA_HEALTH; ?></a></li> am i moving right with this conversion of html to php Edited May 16, 2006 by Jonas Link to comment Share on other sites More sharing options...
scott100 Posted May 14, 2006 Share Posted May 14, 2006 hey well done You could just print "<html>....</html>"; the whole page?Are you printing the menu from a file or something? Link to comment Share on other sites More sharing options...
virtualadz Posted May 14, 2006 Author Share Posted May 14, 2006 what do you mean by "You could just print "<html>....</html>"; the whole page?Are you printing the menu from a file or something? "printing , where does this topic come from? Link to comment Share on other sites More sharing options...
scott100 Posted May 14, 2006 Share Posted May 14, 2006 print as in print to screen, like echoyou have:<li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>" title="The zero dollar ads page" ><?php echo MENU_TEA_HEALTH; ?></a></li>print "<li><a href=\"tep_href_link(FILENAME_ALL_PRODUCTS);\" title=\"The zero dollar ads page\" ><MENU_TEA_HEALTH;></a></li>";My php is a bit rusty, but why are you using php? Link to comment Share on other sites More sharing options...
virtualadz Posted May 14, 2006 Author Share Posted May 14, 2006 "why are you using php", well simple for an online store. Link to comment Share on other sites More sharing options...
virtualadz Posted May 14, 2006 Author Share Posted May 14, 2006 hey problems in php , i forgot on thing, visit www.bhuratea.com and on the left find Our Products under that some products you will notice that's its url is all different, how do i do that, all those products name are edited in admin by me, now how do i make it that the first sub-menu of the drop-down menu , copeis all the category names and it's url's from my sql, strange i know but this is problem Link to comment Share on other sites More sharing options...
scott100 Posted May 14, 2006 Share Posted May 14, 2006 I mean for the menu, why are you using php for it?Do you have items in a file or something which php is printing into your menu? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now