2 replies [Last post]
clazzid
clazzid's picture
Offline
newbie
Mexico
Last seen: 2 years 10 weeks ago
Mexico
Timezone: GMT-6
Joined: 2012-02-07
Posts: 2
Points: 3

hello all!
im having trouble building the right menu i need, its a jquery lavalamp, with 3 level dropdown submenus,

ive found a lot of open source code out there but none really matched my needs, ive started modifying some of them but i always run into some problems.

im getting very close using the code found here http://premiumcoding.com/jquery-dropdown-lavalamp-menu/

ive improved it if anyone is interested in using my version.

ive fixed the anoying queuing of dropdowns,
ive added a second "lavalight" which is a png hover above the menu,
ive fixed the css to display submenus when javascript is disabled,
i added a animated color change to link texts.

BUT IM STUCK!!
i cant figure out why the damn dropdown goes down with the screen when u scroll down, im sure its in the css.

can anyone help?
here is my CSS:

/*settings for whole menu*/
.menu{
padding:0 0 10px 0;
}
.nav {
 
   height:40px;
   background-image:url(../images/backgroundMiddle.png); 
   padding:0px 0px 0px 0px;
   margin-left:35%;
   margin-top:-30px;
   float:right;
 
}
.nav #navLeft{
   width:4px;
   height:40px;
   background-image:url(../images/backgroundLeft.png); 
   margin-left:-4px;
   float:left;
}
.nav #navRight{
   width:4px;
   height:40px;
   background-image:url(../images/backgroundRight.png); 
   margin-top:0px; 
   margin-right:-4px;
   float:right;
}
.nav ul {
   cursor:pointer;
   position:fixed;
   list-style: none; 
   font-size: 12px;  
   margin-top:8px;
   margin-left:40px;
}
 
.nav ul ul{
 
   z-index:100;  
   margin-left:160px;
   margin-top:-21px;
 
}
/*settings for upper menu main links */
.nav a {
   cursor:pointer;
   text-decoration: none;
   font-family: 'Lucida Sans Unicode', Verdana, sans-serif;
}
/*settings for upper menu main links*/
.nav li {
    cursor:pointer;
	height:40x;
    padding-bottom:0px;
    position:relative;
	float: left;
	list-style:none;
    position:relative;
	z-index:3;
	margin-top:12px;
}
 
 /*settings for links of main menu*/ 
.nav li a { 
   height:40x;
   position:relative;
   z-index:30;
   padding:0px 15px 0px;
   cursor:pointer;
   font-size:12px;
   display:inline;
   color:#fff;
   text-transform: uppercase;    
   padding-top:10px;
    cursor: pointer;	
}
/*settings for submenus*/ 
.nav li li {
   border-bottom:thin dotted #454545;
   cursor:pointer;
   width: 140px;	
   min-height:23px;
   height:23px;  
   display:none;
   font-size: 12px;
   padding-top:4px;
   background-color: #1E1E20;
   margin: 0px -40px;
   filter:alpha(opacity=100);
   -moz-opacity:1;
   -khtml-opacity: 1;
   opacity: 1;
   color:#fff;
   position:relative;
 
}
.nav li li a{
   text-transform: capitalize;
   text-decoration: none;
   color:#fff;
}
 
.nav  li li li{
   color: #DC3522;
   background-color: #2A2B2C;
   margin-left:-20px
}
.nav  li li li li{
   color: #fff;
   background-color: #000;
}
 
/* settings for submenu links on rollover*/
.nav ul, li li{
  width: 0px;	
 
}
/*settings for submenu links*/
 
/*settings for lava lamp sliding effect*/
 
.nav #box {
		position:absolute; 
		left:0; 
		top:0px; 
		z-index:1; 
		background:url(../images/hoverRight.png) no-repeat right;
		height:25px;
		padding-right:5px;
		margin-left:0px;
	}
	.nav #box .head {
		background:url(../images/hoverMain.png);
		height:25px;
		padding-left:0px;
	}
		.nav #box .clight {
		height:89px;
		padding:15px;
		margin:-15px;
		margin-top:-100px;
 
 
	}
 
.nav #box2 {
		position:absolute; 
		left:0; 
		top:0px; 
		z-index:1; 
		height:25px;
		padding-right:5px;
		margin-left:0px;
	}
	.nav #box2 .head {
		height:25px;
		padding-left:0px;
	}
		.nav #box2 .clight {
		background:url(../images/c-light.png) no-repeat;
		height:89px;
		padding:15px;
		margin:-15px;
		margin-top:-100px;
	}
.nav li li.alt{
background-color:#333;
}
ul.nav li a span {
background:url(../images/triangle.png) 100% 1px no-repeat;
margin-top:7px;
position:absolute;
top:2px;
margin-left:0px;
left:0;
height:100%;
width:100%;
 
}
 
ul.nav li li.submenu2 span {
background:url(../images/triangle_sub.png) 0% 35% no-repeat;
}
 
.submenu {
	background:url(../images/triangle_small.png) 100% 0px no-repeat;
 
}
.submenu:hover {
 
}
.nav li li.submenu2{
 
	background:url(../images/triangle_sub_small.png) 98% 50% no-repeat;
	background-color:#1E1E20;
}
.nav li li.submenu2:hover, .nav li li.submenu3:hover{
 
	background:url(../images/triangle_sub.png) 98% 50% no-repeat;
	background-color:#999999;
	border-bottom:thin dotted #999999;
}
.nav li li li.submenu3{
	background:url(../images/triangle_sub_small.png) 98% 50% no-repeat;
}
.nav li li:hover, .nav li li li:hover{
	background-color:#999999;
	border-bottom:thin dotted #999999;
}
.nav li li.submenu2 li{
	background-color:#1E1E20;
}
.nav li li.submenu2 li:hover{
	background-color:#999999;
	border-bottom:thin dotted #999999;
}
.submenu  li:hover a{/*color of font of hover effect on first submenu*/
	color:#fff;
}
.submenu li:hover li a, .submenu li:hover li:hover li a, .submenu li li a{/*color of font for submenu level 2 and 3*/
	color:#ffffff;
}
.submenu li:hover li:hover a{/*color of font for hover on submenu level 1*/
	color:#fff;
}
.submenu li:hover li:hover li:hover a{/*color of font for hover on submenu level 2*/
	color:#fff;
}
.titleMenu2{
	text-align:center;
}
.linkText{
	text-align:center;
}

clazzid
clazzid's picture
Offline
newbie
Mexico
Last seen: 2 years 10 weeks ago
Mexico
Timezone: GMT-6
Joined: 2012-02-07
Posts: 2
Points: 3

got it

i keep posting help and answering my own questions, Tongue well i guess it good for anyone else having the same problems,
the issue here was the position:fixed;
on the nav ul.
solved it by changing it to absolute, top 0 and left 0, and the the sub ul, relative.

go check out the homepage. if you want my mods let me know.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 26 weeks 4 days ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

great work for you. keep in

great work for you. keep in touch.