PDA

View Full Version : Easiest Way for Coding a Drop-Down Menu for a Beginner



question
Jul 23rd, 2010, 05:06 PM
I currently have a navigation bar at the top of my website using images and links to create the button. I have been searching online for coding, but I can't seem to get it right, nor find a way to create it with my current navigation buttons.

Any help or links to tutorials will be great. Link to website in case it's needed for reference: http://howrsehelper.com/

jimhill
Jul 23rd, 2010, 06:10 PM
What is the problem you are having?

question
Jul 23rd, 2010, 06:33 PM
I can't find any code online to create a drop down as I'm not just creating one with coding; I have a image being used as a button. I haven't found any coding or tutorials for creating menus with an existing button..

I am also unaware where to put the coding. I kind of understand the HTML coding and using <div> and <li> to create a list. I just don't know how to link that to a image and CSS. As long as I have an example, I will be able to duplicate it for the rest of the buttons. I don't know much CSS; I am mainly familiar with HTML.

skywalker2208
Jul 23rd, 2010, 08:02 PM
Suggestion instead of using other peoples code that you don't understand. Why not try to learn how it works and then make the changes you need instead of just hacking something together and hoping it works.

jimhill
Jul 23rd, 2010, 08:59 PM
Here is one I made that has an image in the first dropdown as the background. Look at it and see if it is what you are looking for. http://bransonwebdesign.info/menutester.php

jimhill
Jul 23rd, 2010, 09:09 PM
The bad thing is as skywalker pointed out, I can give you the code but since mine is database driven it may not help you as much. The php writes the code that calls the javascript.

<table width=30%><tr><td align=center><span class="style1">Resources</span></td>
</tr>

<?
include "dbc.php";
$ax=1;
$ay=1;
$result = mysql_query("SELECT * FROM links_cat order by cat_name");
while($row = mysql_fetch_array($result))
{
$catname = "cat" . $ay;
$catdesc = $row[cat_desc];
echo "<tr><td id=\"main_container\"><div style=\"display: none; position: absolute; z-index: 110; left: 20; top: 100; width: 15; height: 15\" id=\"preview_div\" class=\"test\"></div><input type=\"button\" class=\"button\" onclick=\"return toggleMe('$catname')\" value=$row[cat_name]><div id=\"$catname\" style=\"display:none\">";
$result1 = mysql_query("SELECT * FROM links where cat_id = $row[cat_id] order by link_name");
while($row1 = mysql_fetch_array($result1))
{
$name = "para" . $ax;
$ax = $ax+1;

echo "<div id=\"main_container1\"><a href=\"$row1[link_url]\" target=\"_blank\" onmouseover=\"return toggleMe('$name')\" onmouseout=\"return toggleMe('$name')\">$row1[link_name]</a><div id=\"$name\" style=\"display:none\" class=\"style2\">";
echo $row1[link_desc]. "</div></a>";
}
$ay=$ay+1;
echo "</td></tr>";
}
?>
</table>


CSS

<style>
input.button {
color: #fff; background: #006699;
font-size: .8em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: solid 1px #ffcf31;
width:200px;
text-align:left;
}
#main_container {
text-align:justify;
width: 100%;
height:auto;
background-color:#CCCCFF;
BORDER-right: #000000 1px solid;
BORDER-left: #000000 1px solid;
BORDER-top: #000000 1px solid;
BORDER-bottom: #000000 1px solid;
z-index:500000;
height:auto;
overflow:hidden;
white-space:normal;
min-width:100px;
padding-right:20px;
background-image:url(../images/menu-bg.jpg);
}
#main_container1 {
text-align:justify;
width: 30%;
height:auto;
background-image:url(images/bgpopup.jpg);
background-color:#CCCCFF;
BORDER-right: #000000 1px solid;
BORDER-left: #000000 1px solid;
BORDER-top: #000000 1px solid;
BORDER-bottom: #000000 1px solid;
z-index:500000;
height:auto;
overflow:hidden;
white-space:normal;
min-width:100px;
padding-right:20px;
}
a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #FFFFFF;
text-shadow:#CCCCCC;
text-decoration:none;

}

.style1 {
color: #195c90;
font-size: 36px;
font-weight: bold;
}
.style2 {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
</style>

Javascript

// JavaScript Document
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}

question
Jul 23rd, 2010, 10:24 PM
skywalker: Yes, I know but I learn easier by looking at other coding and switching it around.

I just don't get how the little drop down menus will connect with my images that I created into buttons..Let me try rephrasing the question. What if I were to create a list with the div coding? What CSS coding will be used to connect the two? How will the image that I already have connect to the drop down coding?

jimhill
Jul 24th, 2010, 05:53 PM
Here is a quick one. I see that in your code you have <tr> tags for some reason and no closing </a> tags. This will cause you trouble.

Here is the html:


<table width="800" align="center">
<tr>
<td colspan="3"><div id="nav">
<ul id="sddm">
<li><a href="index.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<img src="http://img189.imageshack.us/img189/941/homecopyv.jpg" /></a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="../index.php"><img src="http://img189.imageshack.us/img189/941/homecopyv.jpg" /></a>
</div>
</li>
<li><a href="ranges.php"><img src="http://img44.imageshack.us/img44/6073/aboutcopy.jpg" /></a>
</li>
<li><a href="trails.php"><img src="http://img828.imageshack.us/img828/6482/faqscopy.jpg" /></a>
</li>
<li><a href="outdoors.php"><img src="http://img814.imageshack.us/img814/9542/forumcopy.jpg" /></a></li>
<li><a href="gallery.php" target="_blank">
<img src="http://img64.imageshack.us/img64/2909/divinelinkscopy.jpg" /></a></a></li>
<li><a href="contact.php"></li>
</ul>
<div style="clear:both"></div>
</td>
</tr>
</table>


And the CSS you probably know

Here is the javascript


<script language="javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>

SB65
Jul 24th, 2010, 06:21 PM
I personally prefer a CSS menu, as you never know who's got javascript enabled or not.

You need to get the html markup right. For this you want a nested unordered list. The first level li elements will contain your top level horizontal menu, and the second level the drop downs. Something like:


<ul>
<li><a href="/">Home</a></li>
<li><a href="#">About me</a>
<ul>
<li><a href="#">Even more about me</a></li>
<li><a href="#">And even more</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>


Here we have a second level menu, which will be the drop down, under the About Me first level menu. Note that this is nested within the li element for About Me.

To cope with your images, you can just insert the image into the links as appropriate:


<a href="/"><img alt="Home" src="/images/home.jpg"></a>

(Assuming that you keep your images which provide the menu, it's better to have your images on the page and not as background images - both for the benefit of search engines and people using assitive technology like screenreaders. A screen reader isn't going to read )

So that's the sort of markup you want to end up with. However, easy stages is the best approach here I think. Start with a horizontal menu, no drop down. A quick Google brings up this (http://www.tutorial5.com/content/view/147/52/) for a simple horizontal menu without a drop down. It ought to be reasonably straightforward to adapt this approach to your existing menu.

Once this is OK, and only then, have a go with the drop downs. This involves a little more complex css - have a look here (http://divitodesign.com/css/how-to-dropdown-css-menu/) for a relatively simple explanation.

Hope that helps. Post back here if you get stuck. Menus can be quite complex when you're new to them.

jimhill
Jul 24th, 2010, 06:43 PM
While I see your point about javascript even in their example the hover requires it.

SB65
Jul 24th, 2010, 06:52 PM
While I see your point about javascript even in their example the hover requires it.

Only for IE6 since it doesn't support :hover except on <a> elements. Everything else supports :hover on elements natively.

That said, loads of sites do use javascript menus of course. I just think css menus are easier to understand for someone less familiar with web build.

question
Jul 25th, 2010, 02:04 AM
I used these codes, not sure if they were in the correct places. jimhill, thanks for pointing that out with the closing codes. I guess what I'm asking if someone can look over the coding. I'm mostly concerned about the CSS. I got that off of a tutorial and I'm not sure if I have to edit it...Also, when I saved the php coding, it had the sublinks under the correct images. When I add the CSS with it, those links disappeared and nothing came up if I put my mouse over the picture. If I clicked it, it just went right to the assigned page with no drop down menu.

This was placed in the CSS coding, in the Header part, under the splash coding: >>>This is what I am most concerned about - the placing.


<style type="text/css">

#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
float: left;
position: relative;
}

.navigation{
border: 1px solid black;
background-color: #FFEEC6;
}

.navigation a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}

.subuls li{
width: 100%;
}

.subuls li a{
text-decoration: underline;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;

//--><!]]></script>



This was posted in the Header.php - I'm pretty sure this is right since that's where I put my first navigation code: (Sorry the spacing is weird..I had it saved in Notepad and it changed the format a bit)


<ul id="navigation">

<li><a href="http://howrsehelper.com/"><img style="width: 108px;

height: 30px;" class="floatLeft" title="Home"

src="http://img189.imageshack.us/img189/941/homecopyv.jpg"

alt="Home"></a></li>
<li><a href="http://howrsehelper.com/about/"><img style="width:

114px; height: 30px;" class="floatLeft" title="About"

src="http://img44.imageshack.us/img44/6073/aboutcopy.jpg"

alt="About"></a></liv>
<li><a href="http://howrsehelper.com/faqs/"><img style="width:

114px; height: 30px;" class="alignnone" title="FAQs"

src="http://img828.imageshack.us/img828/6482/faqscopy.jpg"

alt="FAQs"></a></liv>
<li><a href="http://howrsehelper.com/forum/"><img style="width:

114px; height: 30px;" class="alignnone" title="Forum"

src="http://img814.imageshack.us/img814/9542/forumcopy.jpg"

alt="Forum"></a></li>
<li><a href="http://howrsehelper.com/divine-links/"><img

style="width: 115px; height: 30px;" class="alignnone"

title="Divine Links"

src="http://img64.imageshack.us/img64/2909/divinelinkscopy.jpg"

alt="Divine Links"></a>
<ul class="subuls">
<li><a href="http://www.howrsehelper.com/divine-links/xanthos-

links/">Xanthos Links</a></li>
<li><a href="http://www.howrsehelper.com/divine-

links/achimedes-links/">Archimedes Links</a></li>
<li><a href="http://www.howrsehelper.com/divine-

links/archimedes-qa-and-links/">Archimedes Q&A</a></li>
</ul>
</li>

<li><a href="http://howrsehelper.com/layouts/"><img

style="width: 114px; height: 30px;" class="alignnone"

title="Layouts"

src="http://img815.imageshack.us/img815/9492/layouts.jpg"

alt="Layouts"></a>
<ul class="subuls">
<li><a href="http://www.howrsehelper.com/layouts/layout-

help/">Layout Help</a></li>
<li><a href="http://www.howrsehelper.com/layouts/customized-

layouts/">Customized Layouts</a></li>
<li><a href="http://www.howrsehelper.com/layouts/ec-layouts/">EC

Layouts</a></li>
<li><a href="http://www.howrsehelper.com/layouts/breeder-

layouts/">Breeder Layouts</a></li>
<li><a href="http://www.howrsehelper.com/layouts/pre-made-

scrolling-layouts/">Pre-Made Scrolling Layouts</a></li>
</ul>
</li>

<li><a href="http://www.howrsehelper.com/objective-levels/"><img

style="width: 118px; height: 30px;" class="alignnone"

title="Objectives"

src="http://img651.imageshack.us/img651/8103/objectivescopy.jpg"

alt="Objectives"></a>
<ul class="subuls">
<li><a href="http://www.howrsehelper.com/objective-

levels/objectives-1-to-10/">Objectives 1 to 10</a></li>
<li><a href="http://www.howrsehelper.com/objective-

levels/objectives-11-to-20/">Objectives 11 to 20</a></li>
<li><a href="http://www.howrsehelper.com/objective-

levels/objectives-21-to-30/">Objectives 21 to 30</a></li>
</ul>
</li>

<li><a href="http://www.howrsehelper.com/riding-level-

answers/"><img style="width: 115px; height: 30px;"

class="alignnone" title="Riding Levels"

src="http://img694.imageshack.us/img694/4388/ridinglevelscopy.jp

g" alt="Riding Levels"></a>
<ul class="subuls">
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-1-answers/">Level 1</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-2-answers/">Level 2</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/riding-level-3/">Level 3</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/riding-level-4/">Level 4</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/riding-level-5/"Level 5</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-6-answers/">Level 6</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-7-answers/">Level 7</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-8-answers/">Level 8</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-9-answers/">Level 9</a></li>
<li><a href="http://www.howrsehelper.com/riding-level-

answers/level-10-answers/">Level 10</a></li>
</ul>
</li>

<li><a href="http://www.howrsehelper.com/extras/"><img

style="width: 118px; height: 30px;" class="alignnone"

title="Extras"

src="http://img713.imageshack.us/img713/7986/extrascopy.jpg"

alt="Extras"></a>
<ul class="subuls">
<li><a href="http://www.howrsehelper.com/extras/animated-

signatures/">Animated Signatures</a></li>
<li><a href="http://www.howrsehelper.com/extras/horse-

charts/">Horse Charts</a></li>
</ul>
</li>

<li><a href="http://www.howrsehelper.com/tips/"><img

style="height: 30px; width: 70px;" class="alignnone"

title="Tips"

src="http://img810.imageshack.us/img810/9095/tipscopycopy.jpg"

alt="Tips"></a>
<ul class="subuls">
<li><a href="http://www.howrsehelper.com/tips/game-play-

tips/">Game Play Tips</a></li>
<li><a href="http://www.howrsehelper.com/tips/foal-games/">Foal

Games</a></li>
<li><a href="http://www.howrsehelper.com/tips/equestrian-

center-tips/">EC Tips</a></li>
</ul>
</li></div></body>

Thank you everyone for all your help so far!

SB65
Jul 25th, 2010, 05:07 PM
If you have a link to your test page, that would help to understand what's going on.

Shouldn't be a problem with where you've got the css in your header.

The dropdown javascript you are posting is looking for an element with ID cssdropdown, which you don't have in your html at all. This should be on the containing ul which has class of "navigation". That's probably why the drop down isn't working.

Now to the html markup. You have a number of errors:

- In some cases you are closing your <li> element with </liv> instead of </li>
- You haven't closed your top level <ul> element
- You are missing a closing bracket here:


<a href="http://www.howrsehelper.com/riding-level-answers/riding-level-5/"Level 5</a>

Use the W3C validator (http://validator.w3.org/) to pick up these sorts of errors.

Give that a try.

question
Jul 25th, 2010, 05:50 PM
The dropdown javascript you are posting is looking for an element with ID cssdropdown, which you don't have in your html at all. This should be on the containing ul which has class of "navigation". That's probably why the drop down isn't working.

I think I fixed it...here's the changed coding. For every <li> element I added <li class="navigation">

<ul id="cssdropdown">

<li class="navigation">
<a href="http://howrsehelper.com/"><img style="width: 108px;

height: 30px;" class="floatLeft" title="Home"

src="http://img189.imageshack.us/img189/941/homecopyv.jpg"

alt="Home"></a></li>

question
Jul 25th, 2010, 06:03 PM
The drop-down did work, but it pushed everything off the page:
http://a.imageshack.us/img208/9022/errorjw.jpg

Here's the location of the CSS: in between the splash code and main coding:

#splash {
background-color: #362D25;
height:140px;
width:1100px;
margin: 0px auto;
/*Splash's redeclared in functions.php for WP 2.1 or greater */
}

<style type="text/css">

#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
float: left;
position: relative;
}

.navigation{
border: 1px solid black;
background-color: #FFEEC6;
}

.navigation a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}

.subuls li{
width: 100%;
}

.subuls li a{
text-decoration: underline;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;

//--><!]]></script>


/* Main */

#main {
width: 1100px;
margin: 0 auto;
background-color:#fff1d7;
background-image:url(img/pagebg.png);

SB65
Jul 25th, 2010, 07:16 PM
Ok, I see what the problem might be.

Here it's simplest to have all your css, and only the css, within <style> tags. It shouldn't matter too much exactly where within the css your new code goes. At the moment it looks like you have at least two opening <style> tags, and also your <script> within the <style> tags as well.

So within your header you need:

<style type="text/css" media="screen">
...
all your css rules
...
</style>
<script type="text/javascript>
javascript code
</script>

You don't need to have class="navigation" on each li - in fact this may be causing some problems as well as through .navigation you are applying a border to each li - which I don't think you want. I'd suggest putting it back on the <ul>. Having both and id and a class on the element is fine.

If the fixes above still don't sort it, can you provide a link to your test page?

EDIT: Just looking at your css, it contains:


.navigation a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

which will generate a gap between each <a> element on right and left - and will increase the total width of your menu causing it not to fit. Assuming you're still using the same images I don't think you want these margins at all.

question
Jul 25th, 2010, 08:55 PM
Alright, I removed the class="navigation" from the li tags and added it to only the top <ul> tag.

For the CSS, just make the margin 0px;?

SB65
Jul 25th, 2010, 08:57 PM
Just leave it at text-decoration:none for now. The default left and right margins should be 0 anyway.

question
Jul 25th, 2010, 09:25 PM
Thanks - The only problem now is that there are little bullets on the buttons, which I would like to remove. Also, is there anyway to add a separation between the links in the drop downs other than just an 'enter'?

I have it up on my website now (http://howrsehelper.com/) I didn't want to have it up before as I didn't want to give the viewers problems, since it was impossible to access any pages with the problems.

SB65
Jul 25th, 2010, 09:37 PM
To remove the bullet point, and the black gap above:


.navigation {
background-color:#FFEEC6;
list-style-type:none;
margin:0;
}

and to remove the gap below add the following:


.navigation a img{
display:block
}

EDIT: Not sure what you mean by separation between the links - do you mean a vertical gap? Something like:


.subuls li {
margin-top:5px;
width:100%;
}

You might also want to remove the bullets on the drop down:


.subuls {
background-color:lightyellow;
display:none;
left:0;
list-style-type:none;
position:absolute;
top:1.2em;
width:12em;
}

question
Jul 25th, 2010, 09:56 PM
Thanks so much! One quick opinion - Should I remove the title="Title" coding?
Example:

<li><a href="http://howrsehelper.com/"><img style="width: 108px; height: 30px;" class="floatLeft" title="Home" src="http://img189.imageshack.us/img189/941/homecopyv.jpg" alt="Home"></a></li>

I found it can get a bit annoying when hovering the mouse over the scroll menu and having that little title pop up. This shouldn't be a problem if the picture weren't to show up, right? Isn't the alt="Home" coding used in case the image doesn't show?

SB65
Jul 25th, 2010, 10:02 PM
Remove it if you think it doesn't help.

The text in "Title" will appear in everything except IE when you hover, and if the image isn't there the alt text will appear as you say. In IE inevitably, it's different and the alt text will appear on hover.