I've styled my menu the way I want it, but I've got a problem with styles when I've drilled down into a sub menu area. If I start on the home page with all menus collapsed, and expand and close the menus, the animation looks great

But when I'm on a page where a menu is expanded, closing the menu causes the links to get my top level styles, which doesn't look so good

I've included my CSS here (apologies for its messiness, I just started working on it so its still rough, and I'm not using child selectors since I'm working on making it compatible with IE6, which makes it even crappier) along with some images of three different scenarios - a fully expanded menu, the same menu in the middle of collapse animation after having started fully expanded (looks messed up), and the same menu in the middle of collapse animation after having started fully collapsed (looks fine)

If anyone has some ideas on how to clean that up would be great :D

/* sidebar menu
--------------------------------------------------*/
/* reset list styles and remove the list style types that have been set by default css in the system css */
#block-user-1  li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#block-user-1 li.leaf, #block-user-1 li.collapsed, #block-user-1 li.expanded {
	list-style-type: none;
	list-style-image: none;
}
#block-user-1 ul {padding:0px; margin:0px;}
#block-user-1 li.collapsed, #block-user-1 li.leaf {
	padding:0;
	line-height:24px;
}

/* give top level list items a background, and remove it for sub level list items */
#block-user-1 ul li {
	background:url(images/menu_gradient.gif) repeat-x;
}
#block-user-1 ul li li, #block-user-1 ul li ul li {
	background:none;
}

/* set initial styles for top level links, then finish styles at bottom */
#block-user-1 ul li a {
	line-height:24px;
	display:block;
	padding:4px;
	height:1%; /* IE WIN */
	text-decoration:none;
	border-bottom:1px solid #b8bcbe;
	color:#fff;
	height:32px;
	background:url(images/bullet.gif) no-repeat 10px center #e3e5e7;
	font-weight:normal;
}

/* Sub level link styles */
#block-user-1 ul li.expanded ul li a, #block-user-1 ul li.expanded ul li.expanded ul li a {
	color:#000;
	font-size:82.5%;
	padding-left:30px;
	display:block;
	height:19px;
	line-height:19px;
	background:url(images/breadcrumb.gif) no-repeat 5px center #ffffff;
	font-weight:normal;
}
#block-user-1 ul li.expanded ul li a:hover, #block-user-1 ul li.expanded ul li.expanded ul li a:hover, #block-user-1 ul li.expanded ul li.active-trail a, #block-user-1 ul li.expanded ul li.expanded ul li.active-trail a {
	color:#000;
	font-size:82.5%;
	padding-left:30px;
	background:url(images/breadcrumb.gif) no-repeat 5px center #d6e0e5;
	font-weight:normal;
}

/* Top level link styles of sublevel items */
#block-user-1 ul li.expanded a, #block-user-1 ul li.expanded ul li.expanded a {
	line-height:24px;
	display:block;
	padding:4px;
	padding-left:20px;
	height:1%; /* IE WIN */
	text-decoration:none;
	border-bottom:1px solid #d4d7d9;
	color:#fff;
	background:url(images/bullet_on.gif) no-repeat 10px center #4c8cb2;
}

/* Top level links style */
#block-user-1 .collapsed a, #block-user-1 .leaf a {
	display:block;
	height:1%; /* IE WIN */
	text-decoration:none;
	border-bottom:1px solid #b8bcbe;
	color:#000;
	padding-left:20px;
}
#block-user-1 .collapsed a:hover, #block-user-1 .leaf a:hover {
	text-decoration:none;
	background:url(images/bullet_on.gif) no-repeat 10px center;
	color:#fff;	
}

/* The style below redefines the link style when the menu is collapsing - this helps IE not look terrible during the animation */

#block-user-1 li.start-collapsed ul li a {
  display:block;
  height:19px;
  background-color:transparent;
  font-size:82.5%;
  padding-left:30px;
  background:url(images/breadcrumb.gif) no-repeat 5px center #ffffff;  
 }
CommentFileSizeAuthor
expanded3.jpg28.31 KBsansui
expanded2.jpg31.29 KBsansui
expanded1.jpg26.2 KBsansui

Comments

vuil’s picture

Status: Active » Closed (outdated)

I close the issue as Closed (outdated) because of not relevant and very old 6.x version.