PDA

View Full Version : CSS drop menu


stag
03-08-2007, 07:59 PM
Hi all,

I have built a simple navagation bar which turns a hightlight colour when mouse hovers over. I Now need to build a drop menu in its simplist form

http://www.cssplay.co.uk/menus/drop_examples.html#nogo


Its example 5. This is the type I want. However, I have never done this and im not sure how to go about. The code for it can be found here-

http://www.cssplay.co.uk/menus/css5/menu5.css

I need the menu to work in both FF and IE.

Can anyone offer me guidence to this?

Cheers
Stag

domedia
03-11-2007, 03:58 PM
Hi Stag,
The HTML and CSS is given to you on the CSS play website. Just follow the instruction and copy and paste the HTML.

dsnyder
03-11-2007, 10:33 PM
I’m sorry. I’ve found the code from one of the CSSplay menu's but no real instructions. Could someone show me what I’m missing? I’m not sure what to do with the code. Tried pasting it into a new CSS page in DW and then linking it to a new .htm pg but I see nothing and don’t yet see how to enter in button text or preview anything in a browser. I’m clearly not linking things correctly or pasted in the code incorrectly.


lost in CSS,
dsnyd

domedia
03-12-2007, 03:25 PM
I’m clearly not linking things correctly or pasted in the code incorrectly. You can just copy and paste the code they provided, but without seeing your code, I can't say why it won't work for you.

dsnyder
03-12-2007, 05:07 PM
Code. Of course. It’s pasted below. (is this the best way to show it or should I attach it in some other way?)
I’ve now found how to paste the CSS & html code and get them to work.
Here are the problems I’m having as I try to customize: (If this is too many questions at once let me know and I will slap myself)

1a. Don’t know the proper way to delete some of the drop down submenus. Ex. If I want to menu 2 “SCHOOL” to have only “Cleveland” as a subcategory, what do I do? So far when I try removing code it messes up the rest of the menu big time.

1b. As the styling for all my menu tabs is the same should I condense the CSS original code?

2. My submenus don’t remain visible to select. Only seem to show in the hover state?

3a. How would I go about moving the last two menu “buttons” over towards the right side of the layout? ie. Move the “Contact Us” and “View Cart” to the right. Does it involve padding or margins in the CSS code?

3b. Will I be able to connect my “View Cart” button to Paypal this way or should I do this button/link in a different way; not connected to CSS?

Thanks,
dsnyder


Code htm:
</head>
<link href="CssFiles/menu.css" rel="stylesheet" type="text/css">

<div class="menu1">

<ul>
<li><a class="menu1one" href="#nogo">STORE

<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Sheet Music</a></li>
<li><a href="#nogo">Recordings</a></li>

</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
<ul>
<li><a class="menu1two" href="#nogo">SCHOOL
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>

<li><a href="#nogo">Cleveland</a></li>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
<li><a class="drop" href="#nogo">remove
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>

<ul>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
</ul>
</td></tr></table>

<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1three" href="#nogo">SERVICES

<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Custom Arranging</a></li>
<li><a href="#nogo">Live/Studio Recording</a></li>
<li><a href="#nogo">Lessons</a></li>
<li><a href="#nogo">Music for Events</a></li>

<li><a href="#nogo">Artists & Ensembles for Hire</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1four" href="#nogo">BOOKINGS</a></li>
<li><a class="menu1five" href="#nogo">Contact us</a></li>
<li><a class="menu1six" href="#nogo">View Cart
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>

<ul class="endstop">
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
<li><a href="#nogo">remove</a></li>
<li><a class="drop" href="#nogo">remove
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul class="left">

<li><a href="#nogo">April 2006</a></li>
<li><a href="#nogo">March 2006</a></li>
<li><a href="#nogo">February 2006</a></li>
<li><a href="#nogo">January 2006</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->

</li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>

</div>
<div class="col3">


CODE CSS:
================================================== ==============
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
/* common styling */
.menu1 {
float:left; width:100%; font-family: verdana, arial, sans-serif; font-size:11px;
border-top:none; border-bottom:none;
margin:0 0 20px 0; /* for this demo only */
}
.menu1 ul {
padding:0;margin:0;list-style-type:none;
}
.menu1 ul li {
float:left; position:relative; background:none; no-repeat top right;
}
.menu1 ul li a, .menu1 ul li a:visited {
float:left; display:block; text-decoration:none;color:#999; padding:0px 16px; line-height:20px; height:20px; border-bottom:none;
}

.menu1 ul li:hover {width:auto;}

.menu1 ul li a.menu1one:hover {border-color:#fc0; color:#fc0;}
.menu1 ul li a.menu1two:hover {border-color:#fc0; color:#fc0;}
.menu1 ul li a.menu1three:hover {border-color:#fc0; color:#fc0;}
.menu1 ul li a.menu1four:hover {border-color:#fc0; color:#fc0;}
.menu1 ul li a.menu1five:hover {border-color:#fc0; color:#fc0;}
.menu1 ul li a.menu1six:hover {border-color:#fc0; color:#fc0;}

.menu1 ul li:hover a.menu1one {border-color:#fc0; color:#fc0;}
.menu1 ul li:hover a.menu1two {border-color:#fc0; color:#fc0;}
.menu1 ul li:hover a.menu1three {border-color:#fc0; color:#fc0;}
.menu1 ul li:hover a.menu1four {border-color:#fc0; color:#fc0;}
.menu1 ul li:hover a.menu1five {border-color:#fc0; color:#fc0;}
.menu1 ul li:hover a.menu1six {border-color:#fc0; color:#fc0;}

.menu1 ul li ul {
display: none;
}
.menu1 table {
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu1 ul li:hover ul {
display:block;position:absolute;top:32px;margin-top:1px; left:0;width:154px;border-bottom:none;
}
.menu1 ul li:hover ul.endstop {
left:-92px;
}
.menu1 ul li:hover ul li ul {
display: none;
}
.menu1 ul li:hover ul li a {
display:block;background:#fff;color:#000;height:au to;line-height:15px;padding:4px 16px; width:120px; border:none; border-bottom:0;
}
.menu1 ul li:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-1px;
}
.menu1 ul li:hover ul li:hover ul.left {
left:-153px;
}



/* specific to IE5.5 and IE6 browsers */
.menu1 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:33px; background:#fff;left:0; border-bottom:none;
}

.menu1 ul li a:hover ul.endstop {
left: -92px;
}
.menu1 ul li a:hover ul li a {
display:block;background:#fff;color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:none; border-bottom:0;
}
.menu1 ul li a:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px; padding-bottom:4px;
}
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu1 ul li a:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0;color:#000; left:153px;
}
.menu1 ul li a:hover ul li a:hover ul.left {
left:-153px;
}
</style>
<!--[if lte IE 5.5]>
<style type="text/css">
.menu1 ul li a, .menu1 ul li a:visited {height:33px;}
</style>
<![endif]-->

domedia
03-12-2007, 11:59 PM
1a. Don’t know the proper way to delete some of the drop down submenus. Ex. If I want to menu 2 “SCHOOL” to have only “Cleveland” as a subcategory, what do I do? So far when I try removing code it messes up the rest of the menu big time.
Simply delete the LI's with content and they will dissapear. Just remove the <li>text</li>.

If you want to remove a whole subcategory, remove the top LI for that subcategory along with content. This whole menu system is based on nested lists (UL's and LI's), if you want to use it you should learn how they work, it's pretty easy once you get the hang of it. Based on the code you already have, it would probably look something like this, altough I'm not sure why you have 2 UL lists:

</head>
<link href="CssFiles/menu.css" rel="stylesheet" type="text/css">
<div class="menu1">
<ul>
<li><a class="menu1one" href="#nogo">STORE

<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Sheet Music</a></li>
<li><a href="#nogo">Recordings</a></li>

</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
<ul>
<li><a class="menu1two" href="#nogo">SCHOOL
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Cleveland</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1three" href="#nogo">SERVICES

<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Custom Arranging</a></li>
<li><a href="#nogo">Live/Studio Recording</a></li>
<li><a href="#nogo">Lessons</a></li>
<li><a href="#nogo">Music for Events</a></li>

<li><a href="#nogo">Artists & Ensembles for Hire</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1four" href="#nogo">BOOKINGS</a></li>
<li><a class="menu1five" href="#nogo">Contact us</a></li>

</ul>

</div>
<div class="col3">



1b. As the styling for all my menu tabs is the same should I condense the CSS original code?
Not sure what you mean here :) If you mean moving the navigation CSS into your existing style sheet, then yes.

2. My submenus don’t remain visible to select. Only seem to show in the hover state? Not sure what you mean here either, but if this is not the right behavior you're looking for you should probably find some other code instead. HAve a look here as well:
http://css.maxdesign.com.au/listamatic2/index.htm

3a. How would I go about moving the last two menu “buttons” over towards the right side of the layout? ie. Move the “Contact Us” and “View Cart” to the right. Does it involve padding or margins in the CSS code? Unfortunately same here, I'm not really sure what you're looking for. Do you have the full page online somwhere so it would be easier to understand?

3b. Will I be able to connect my “View Cart” button to Paypal this way or should I do this button/link in a different way; not connected to CSS? I think it's good practise to keep your shopping cart functions outside of the drop down menu navigation. Many websites use the top right area for indicating amount of items in the shopping cart, along with View Cart link. I have not worked with Paypal, so I can't tell how to implement their link, but I know Paypal does give you instructions on how to add their links.

Hope some of this helps at least :) If possible try to upload to the web so the full document is available.

dsnyder
04-03-2007, 07:56 PM
Thanks for the great reply. I didn’t realize that I even got a reply until today!?
I’ve put the menu online at this location so that my problems are visible to the world.

http://cellocelli.com/menu.htm

1. So…I deleted the LI’s and unwanted content is gone. Nice. :-D
I'm not sure why you have 2 UL lists Me either. I'm just attempting to work with a template. I know next to nothing. Any quick primers on what <ul> & <li> are used for?

2. Still not sure why my drop down menus disappear when I move the curser over them. Can you advise now that the menu is visible online?

Many websites use the top right area for indicating amount of items in the shopping cart,I think that is what I shall do. Many Thanks.

chriskq
04-04-2007, 01:24 AM
the menu doesnt seem to be working correctly
as soon as u hover off a parent nav item, the child list disappears.

just fyi.

dsnyder
04-04-2007, 01:42 AM
I know that it isn't working but I don't know how to get the child list to stay.
Need to figure that out before becoming a real dad!
Can you see what's wrong with the code? (The code is visible without me posting it isn't it?)

Also, what is '#nogo' all about? I see it throughout my code but don't what it is used for.

Thanks...dsnyder