Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Css Dropdown Menu
CrazyRob
post Oct 3 2006, 05:18 PM
Post #1


ITS ALIVE.....MUHHHAAAA
*********

Group: Members
Posts: 532
Joined: 17-October 05
From: Chippenham UK
Member No.: 13,031
hi eveyone for my new site i want to create a css dropdown menu

the image has what the menu needs to look like.

but beneth all the links when you need to click on them another set needs to dropdown how can i achieve this.


(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Oct 3 2006, 05:36 PM
Post #2


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,077
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
Try here:
http://www.csscreator.com/menu/multimenu.php for the html and javascript coding

Also, make certain that you also use the Style Generator on the same page (bottom of the right hand column) to generate the CSS for it.

(list)

Go to the top of the page
 
+Quote Post
CrazyRob
post Oct 3 2006, 05:47 PM
Post #3


ITS ALIVE.....MUHHHAAAA
*********

Group: Members
Posts: 532
Joined: 17-October 05
From: Chippenham UK
Member No.: 13,031
i dont think thats what i need here is what i want the menu to look like, but icant workout how to have a css menu that does just that.


(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 3 2006, 05:53 PM
Post #4


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,916
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
Using the "hover" pseudo-class, and unordered lists can achieve what you want. You'll find many ways on how it can be achieved here: http://css.maxdesign.com.au/listamatic2/

(list)

Go to the top of the page
 
+Quote Post
CrazyRob
post Oct 3 2006, 06:04 PM
Post #5


ITS ALIVE.....MUHHHAAAA
*********

Group: Members
Posts: 532
Joined: 17-October 05
From: Chippenham UK
Member No.: 13,031
tose menues are more along the lines of what i need. i dont rely know css i know simple commands but not a lot.

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 3 2006, 06:09 PM
Post #6


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,916
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
QUOTE(mxweb @ Oct 3 2006, 02:04 PM) *
tose menues are more along the lines of what i need. i dont rely know css i know simple commands but not a lot.

I see. Well, maybe i can do a "quicky" of what you need and post back later. Though, no promises. smile.gif


Edit:

Ok, i managed to pull off what i think is what you want.

Here's the CSS for it:
CODE
.main {
list-style: none;
}

.main li:before {
content: " > ";
}

.nest {
list-style: none;
font-style: italic;
padding-left: 20px;
}

.nest li:before {
content: " - ";
}

ul.nest {
display: none;
}

ul.main li:hover ul.nest {
display: block;
}


And here's the HTML for the list:
CODE
<ul class="main">
<li>Web Design

<ul class="nest">
<li>Reseller</li>
<li>Shared</li>
</ul>

</li>
<li>Website Design</li>
<li>56k Dial-Up Internet

<ul class="nest">
<li>Information</li>
</ul>

</li>
<li>Domain Registration</li>
<li>Merchant Accounts</li>
<li>Reseller Program</li>
</ul>



(list)

Go to the top of the page
 
+Quote Post
CrazyRob
post Oct 4 2006, 05:29 PM
Post #7


ITS ALIVE.....MUHHHAAAA
*********

Group: Members
Posts: 532
Joined: 17-October 05
From: Chippenham UK
Member No.: 13,031
ok thanks that helped bu after testing it i found that having it drop donw directly under was not rely nav frendly. how do i now hav the menu so that when you click on a menu the sub menu comes out to the right?

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Oct 5 2006, 01:28 AM
Post #8


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,916
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
Remove:
CODE
ul.nest {
display: none;
}

ul.main li:hover ul.nest {
display: block;
}
from the CSS.

Add:
CODE
<script type="text/javascript" language="javascript">
//<![CDATA[
function dd(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "block";
} else {
obj.style.display = "none";
}}}
//]]>
</script>
in the HEAD tag.

and replace the previous list with this one:
HTML
<ul class="main">
<li><a href="java script: dd('nest1');">Web Design</a>

<ul style="display: none;" class="nest" id="nest1">
<li>Reseller</li>
<li>Shared</li>
</ul>

</li>
<li>Website Design</li>
<li><a href="java script: dd('nest2');">56k Dial-Up Internet</a>

<ul style="display: none;" class="nest" id="nest2">
<li>Information</li>
</ul>

</li>
<li>Domain Registration</li>
<li>Merchant Accounts</li>
<li>Reseller Program</li>
</ul>

(list)

Go to the top of the page
 
+Quote Post
CrazyRob
post Oct 5 2006, 01:18 PM
Post #9


ITS ALIVE.....MUHHHAAAA
*********

Group: Members
Posts: 532
Joined: 17-October 05
From: Chippenham UK
Member No.: 13,031
ok i did that but i get an error

Firefox can't find the file at /C:/Documents and Settings/Rob/Desktop/mxscript/site/java script: dd('nest1');.

what have i don wrong?

This post has been edited by mxweb: Oct 5 2006, 01:23 PM