2 replies [Last post]
spiral27
Offline
newbie
Australia
Last seen: 9 years 28 weeks ago
Australia
Timezone: GMT+11
Joined: 2009-10-04
Posts: 1
Points: 1

Hi guys,
My web searches for a code to modify my CSS have failed, so i'm asking for any help if what i'm asking is possible for a simple modification of what i have already.

With this code I have, I would like to make my sub menus expand/contract when the parent is clicked/un-clicked, also making sure the other parent menu items below the selected menu, aren't covered up ie drop down below the sub menu list displayed, and also that the whole menu doesnt reset when a sub category is clicked.

at the moment i have made a simple cascading 2 level menu which just expands/drops down on mouseover.

here is the code so far.
my website is deusphotography.com if you want to see how it works so far, top right menu in the sidebar/header.

Here are 2 examples of what i want it to look like. 1st one re-sets on click, the second one works perfectly as I would like mine to.

file:///D:/Apps/Internet%20and%20I.R.C/wordpress/DHTMLMenuExpanderV2/DME...

http://www.joelcolemanphotography.com/index.html

current code

/* ------------ The top Menu -----------*/
#navwrap {
	float:right;
	font-family: verdana;
	font-size: 11px;
      color:#464646;
      width:205px;
      height:100%;
      padding-bottom:5px;
}
#navwrap ul {list-style:none;margin:0;}
#navwrap li {}
#navwrap li a {
	font-size:11px
      text-align:left;
	padding-top:10px;
	padding-left:5px;
	padding-bottom:5px;
      width:195px;
	height:100%;
	text-decoration:none;
	color:#464646;
}
/* Top Menu About Contact etc*/
#navwrap li.side-menu {
	text-align:left;
      padding-top:10px;
      padding-left:0px;
	padding-bottom:0px;
	height:100%;
	text-decoration:none;
	color:#464646;
	font-weight:bold;
}
#navwrap li.side-menu a {
	letter-spacing: 2px;
	padding-top:10px;
      padding-left:10px;
	padding-bottom:5px;
	height:100%;
	text-decoration:none;
	color:#464646;
}
#navwrap li.side-menu a:hover {
	text-decoration:none;
	color:#E8E8E8;background:#2E2E2E;
}
 
 
/* ------------ drop down -----------*/
 
ul#mc_menu_1 {
margin:0px;
padding:0px;
list-style-type: none !Important;
}
#mc_menu_1 a, #mc_menu_1 a:visited {
background:#fff;
color:#E8E8E8;
display:block;
width:195px;
font-weight:bold;
text-transform:uppercase;
margin:0px;
padding-top:10px
padding-left:10px;
padding-bottom:5px
}
#mc_menu_1 a:hover {
background:#000;
color:#E8E8E8;
margin:0px;
padding-top:10px
padding-left:10px;
padding-bottom:5px
text-decoration:none
}
#mc_menu_1 li {
float:left;
margin:0px;
padding:0px
}
#mc_menu_1 li ul {
position:absolute;
width:10em;
left:-999em
}
#mc_menu_1 li li {
float:left;
margin:0px !Important;
padding:0px !Important;
width:195px;
}
#mc_menu_1 li li a, #mc_menu_1 li li a:link, #mc_menu_1 li li a:visited { 
background:#F3F3F3;
width:195px;
float:left;
text-transform:none;
margin:0px;
padding-top:10px
padding-bottom:5px
padding-left:5px;
}
#mc_menu_1 li li a:hover, #mc_menu_1 li li a:active { 
display:inline;
font-weight:bold;
color:#E8E8E8;background:#464646;
padding-top:10px
padding-bottom:5px
padding-left:10px;
}
#mc_menu_1 li:hover ul { left:auto;
}
#mc_menu_1 li:hover ul, #mc_menu_1 li.sfhover ul { font-weight:normal;
left:auto
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 27 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can't be done with CSS alone

You'll need javascript to do this. If you look at the source for the Joe Colman site, you'll see they're using a jQuery accordian script.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

jQuery

Having recently discovered jQuery, I can vouch for it's usefulness - and awesomeness - with embellishing pages with pretty effects. Once you get the hang of the syntax, it's a piece of cake for things like this. Let us know how you get on Smile

Verschwindende wrote:
  • CSS doesn't make pies