Jump to content

css based drop down menu to be used in php


virtualadz

Recommended Posts

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

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

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

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

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

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

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

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 by Jonas
Link to comment
Share on other sites

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

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 by Jonas
Link to comment
Share on other sites

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

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

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 by Jonas
Link to comment
Share on other sites

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 by Jonas
Link to comment
Share on other sites

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...