Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsZymic Free Web HostingTutorials right
  Reply to this topic Start new topic
left
How To Create A Drop Down Menu, Using HTML/CSS
 right
k.digennaro
post Aug 25 2008, 06:30 PM
Post #1


Outrageously Uber Ninja
*******

Group: Members
Posts: 808
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
I saw a post a few days ago where some one was doing this using javascript. Frankly the exact same effect can be created using HTML/CSS and you don't have to worry about people not having javascript etc.

Here's what we're going to create.
Preview


To start this off we'll create our HTML document. We're going to start this off like any other HTML document we'd create.
CODE
<html>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
<!---Go ahead and insert your meta info and link your page to a CSS, you'll need this later----!>
</head>
<body>
</body>


Alright now we're set to get started. Pay close attention to the code because we are going to be using a lot of the same elements over and over, it can get you confused very quickly.

Let's open up a div tag for our menu.
CODE
<html>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
<!---Go ahead and insert your meta info and link your page to a CSS, you'll need this later----!>
</head>
<body>
<div id="menu">
</div>
</body>


From this point on, everything we create for our menu will be inside this div.

Alright, now if you look at the live example you'll see the "Home" section.
CODE
<ul>
  <li><h2>Home</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="Home Page">Home</a>
      </li>
    </ul>
  </li>
</ul>

This is just made out of different list components. Rather simple, just make sure you close all the tags that need to be closed. Insert this code inside the div.


Now we'll move to the "About Us" section, this code will be very similar to the above code. Pay attention and see if you can see the differences.
CODE
<ul>
  <li><h2>About Us</h2>
    <ul>
         <li><a href="http://www.nascentdescent.com" title="About Us">Who Am I?</a></li>
         <li><a href="http://www.nascentdescent.com" title="About Us">What is my goal?</a>
     <li><a href="http://www.nascentdescent.com" title="About Us">How do I plan on suceeding?</a>
      </li>
    </ul>
  </li>
</ul>


All we did was create a couple extra list elements to create more than one option in the drop box.


Okay now this is where we can make our drop box a little more convenient for users. I'm going to create some options under the "Portfolio" Section. Hover over "Vectors" to see what this will look like.

CODE
<ul>
  <li><h2>Portfolio</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="Portfoilio">Web Templates</a></li>
      <li><a href="http://www.nascentdescent.com" title="Portfolio">Paintings</a>
      <li><a href="http://www.nascentdescent.com" title="Portfolio">Photos</a>
      <li><a href="http://www.nascentdescent.com" title="Portfolio">Vectors</a>
        <ul>
          <li><a href="http://www.nascentdescent.com">People</a>
                    <li><a href="http://www.nascentdescent.com">Objects</a>
                    <li><a href="http://www.nascentdescent.com">Cars</a>    
                    <li><a href="http://www.nascentdescent.com">Places</a>    
                       </li>
             </li>
           </li>
            </li>
         </li>        
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>



The "Contact Us" section is the same as the "About Us" Section
CODE
<ul>
  <li><h2>Contact Us</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="About Us">Email Me</a></li>
      <li><a href="http://www.nascentdescent.com" title="About Us">Send me a letter</a>
            <li><a href="http://www.nascentdescent.com" title="About Us">Give me a Call</a>
      </li>
    </ul>
  </li>
</ul>



That's it for your HTML it should look something like this when you're done.
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
</head>
<body>
<div id="menu">
<ul>
<li><h2>Home</h2>
<ul>
<li><a href="http://www.nascentdescent.com" title="Home Page">Home</a>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>About Us</h2>
<ul>
<li><a href="http://www.nascentdescent.com" title="About Us">Who Am I?</a></li>
<li><a href="http://www.nascentdescent.com" title="About Us">What is my goal?</a>
<li><a href="http://www.nascentdescent.com" title="About Us">How do I plan on suceeding?</a>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Portfolio</h2>
<ul>
<li><a href="http://www.nascentdescent.com" title="SEO Consultants Directory Example">Web Templates</a></li>
<li><a href="http://www.nascentdescent.com">Paintings</a>
<li><a href="http://www.nascentdescent.com">Photos</a>
<li><a href="http://www.nascentdescent.com">Vectors</a>
<ul>
<li><a href="http://www.nascentdescent.com">People</a>
<li><a href="http://www.nascentdescent.com">Objects</a>
<li><a href="http://www.nascentdescent.com">Cars</a>
<li><a href="http://www.nascentdescent.com">Places</a>
</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Contact Us</h2>
<ul>
<li><a href="http://www.nascentdescent.com" title="About Us">Email Me</a></li>
<li><a href="http://www.nascentdescent.com" title="About Us">Send me a letter</a>
<li><a href="http://www.nascentdescent.com" title="About Us">Give me a Call</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>





Time to create the CSS, this is what will add the style to the HTML document.

Now the CSS is really pretty self explained, I'm just going to post it and you can ask questions if you need to.
CODE

#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}


#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
top: 0;
left: 100%;
}


div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}



Enjoy!
Kevin DiGennaro
Go to the top of the page 
 
  + Quote Post
Ed
post Oct 16 2008, 09:42 AM
Post #2


Outrageously Uber Ninja
*******

Group: Administrators
Posts: 2,749
Joined: 11-March 07
From: UK
Member No.: 9
Thanks for this Kevin, I'm sure it will help someone
Go to the top of the page 
 
  + Quote Post
taylor28
post Oct 16 2008, 12:10 PM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 30-September 08
Member No.: 62,109
Thanks for those code you shared. But the link you have given is 404 in when I click it.
Go to the top of the page 
 
  + Quote Post
swordz
post Oct 16 2008, 12:25 PM
Post #4


Outrageously Uber Ninja
*******

Group: Moderators
Posts: 1,794
Joined: 10-July 08
From: UK
Member No.: 44,994
To be honest, the original post is 2 months old...

And Bread should have noticed before he massively bumped it...

swordz
Go to the top of the page 
 
  + Quote Post
Ed
post Oct 16 2008, 01:38 PM
Post #5


Outrageously Uber Ninja
*******

Group: Administrators
Posts: 2,749
Joined: 11-March 07
From: UK
Member No.: 9
QUOTE(swordz @ Oct 16 2008, 01:25 PM) *
To be honest, the original post is 2 months old...

And Bread should have noticed before he massively bumped it...

swordz


The tutorial section is on an approve only basis, I approved it today (I had managed to glaze over it prior to this), then bumped it so everyone could see it. tongue.gif
Go to the top of the page 
 
  + Quote Post
swordz
post Oct 16 2008, 01:56 PM
Post #6


Outrageously Uber Ninja
*******

Group: Moderators
Posts: 1,794
Joined: 10-July 08
From: UK
Member No.: 44,994
Sorry Bread...

swordz
Go to the top of the page 
 
  + Quote Post
IamShipon1988
post Oct 17 2008, 05:48 PM
Post #7


Outrageously Uber Ninja
*******

Group: Moderators
Posts: 1,460
Joined: 19-September 07
From: Rochester, NY
Member No.: 86
That is very nice tutorial, but did you get this to work on IE6? None of the dropdowns I know worked on IE6. Thats why I have choice but to use javascript for dropdowns
Go to the top of the page 
 
  + Quote Post
Alex
post Oct 17 2008, 07:02 PM
Post #8


zIRC Network Admin
*******

Group: Administrators
Posts: 647
Joined: 10-March 07
From: Swindon, Wilts, UK
Member No.: 6
You can do it, by nesting the drop-down element inside an <a> element, which is set to display on a:hover. a:hover works on IE6.
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Oct 18 2008, 03:33 AM
Post #9


Outrageously Uber Ninja
*******

Group: Members
Posts: 808
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
Thanks for the feed back guys, forgot i wrote this... lol smile.gif

Edit: @Sazzad, Alex's method should work, but personally I use JS, just easier..lol
Edit: Sorry, the 404 is my bad smile.gif deleted the link lol, I'll upload it on another page and update the link


-Kevin


One more Edit: Links updated, sorry bout that was cleaning up my directories and didnt have the tut labeled well so i deleted it lol, also made a couple changes to the code, nothing noticeable just realized i had some style added to that first div, i tried to highlight it on the forums thats where it came from lol any ways enjoy!
Go to the top of the page 
 
  + Quote Post
hkcs1234
post Oct 21 2008, 06:48 AM
Post #10


Newbie
*

Group: Members
Posts: 2
Joined: 21-October 08
Member No.: 65,510
Go to google and type in search box that "horizontal/vertical sucker tree menu" then you will get the very good link.Just integrate that code into your website thats all.
Go to the top of the page 
 
  + Quote Post
roblas
post Oct 23 2008, 02:06 PM
Post #11


Newbie
*

Group: Members
Posts: 12
Joined: 10-October 08
Member No.: 63,551
Hi k.digennaro,

Thanks for sharing this, It's really helpful for me to create drop down menu.

rolleyes.gif
Go to the top of the page 
 
  + Quote Post
sobuj
post Oct 27 2008, 12:10 PM
Post #12


Newbie
*

Group: Members
Posts: 2
Joined: 21-October 08
Member No.: 65,539
QUOTE(Bread @ Oct 16 2008, 09:42 AM) *
Thanks for this Kevin, I'm sure it will help someone

it did not wor for me and not for ur preveiw also. make a solve please
Go to the top of the page 
 
  + Quote Post
swordz
post Oct 27 2008, 12:16 PM
Post #13


Outrageously Uber Ninja
*******

Group: Moderators
Posts: 1,794
Joined: 10-July 08
From: UK
Member No.: 44,994
Preview works for me.

What browser are you using?

swordz
Go to the top of the page 
 
  + Quote Post
ebharv
post Oct 31 2008, 01:53 PM
Post #14


Newbie
*

Group: Members
Posts: 6
Joined: 29-October 08
Member No.: 66,768
Thanks for this tutorial, it is extremely helpful. And the best part is the full menu will always be shown to the user. This is an excellent tutorial.
Go to the top of the page 
 
  + Quote Post
death2y
post Nov 7 2008, 10:29 PM
Post #15


Newbie
*

Group: Members
Posts: 20
Joined: 25-October 08
From: Ontario, CA
Member No.: 66,184
I'm having trouble using it, the preview works fine, but when I tried to use it it didn't work. My element containing the menu's id is navmenu, not menu, other than that, everything is the same.

CSS: http://pastebin.com/f13ce45c3

[edit] Fixed it, problem was fully with my html
Go to the top of the page 
 
  + Quote Post
rehmatsultan
post Feb 11 2009, 10:22 PM
Post #16


Newbie
*

Group: Members
Posts: 10
Joined: 6-February 09
From: pakistan
Member No.: 81,023
Domain naming server really count in this scenario
Go to the top of the page 
 
  + Quote Post
the_one
post Feb 13 2009, 07:57 AM
Post #17


Newbie
*

Group: Members
Posts: 1
Joined: 13-February 09
Member No.: 82,022
preview works fine within the Opera, but it doesn't wtihin the IE

may someone explain why?
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Feb 13 2009, 08:12 PM
Post #18


Outrageously Uber Ninja
*******

Group: Members
Posts: 808
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
wat version of ie are you using?

although this tut is great and does work in most browsers your better off using some JS i use JS drops I just wrote this tut in response to a post a member wrote a while back, maybe if i get time ill write another one for a JS drop down although if you google it you'll find one easy.

Kevin DiGennaro
Go to the top of the page 
 
  + Quote Post
muad
post Feb 15 2009, 04:25 PM
Post #19


Newbie
*

Group: Members
Posts: 2
Joined: 15-February 09
From: Indonesia
Member No.: 82,305
QUOTE(k.digennaro @ Aug 25 2008, 06:30 PM) *
I saw a post a few days ago where some one was doing this using javascript. Frankly the exact same effect can be created using HTML/CSS and you don't have to worry about people not having javascript etc.

<snip - please don't quote whole posts that long>
Enjoy!
Kevin DiGennaro

thanks for the tutorial...
I need this tutorial
Go to the top of the page 
 
  + Quote Post
« Next Oldest · Tutorials · Next Newest »
 
 Reply to this topic Start new topic
left
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
 right
0 Members:
left
Forum Jump
 right
 
Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 30th July 2010 - 11:33 PM
Powered By IP.Board 2.2.2 © 2010  IPS, Inc.