Page 1 of 1

[solved]CSSMenu - Horizontal

Posted: Tue Sep 02, 2008 7:47 pm
by aktos
Where can I find documentation how to change css of css menu. I don't know where is the first level second level etc...

I changed hours and it is not too bad but sudenly very bad etc...  I would like to understand where I have to change it .

Not so simple

Re: CSSMenu - Horizontal

Posted: Tue Sep 02, 2008 7:56 pm
by RonnyK
aktos,

when pressing the CSS-button, on the right side of your template, you will see the attached stylesheets. The one starting with ""navigation" is the one for the styling of the menu...

Ronny

Re: CSSMenu - Horizontal

Posted: Wed Sep 03, 2008 7:29 am
by aktos
Yes I understood that. I am changing Navigation: CSSMenu - CSS But I don't understant how it works

Now my menu level 1 is ok after hours of search but my menu level 2 is not visible. I would like blue with a background of white. But I have white on white with a big margin.

cssms supose to be easy for not it

I am It and I dont understant we need to have a hight level of css

Question
what is the diferentce between

#primary-nav ul

And

#primary-nav ul ul


Where should I change my second level menu ?

/* Unless you know what you do, do not touch this */

How can I have visible menu is i don't touch this ??

The problem is I know what I do but It does not do what I want !

Some times I want to change the color of the second level and sudenly the color of the first menu is change !

Now my fist level is ok but my second level is !!!!!!!!!!!!!!!!!!!!!!!!!!!! ??? ??? ??? ??? :o >:( >:( >:( >:( >:(

I just want something visible !!!

Maybe you need source

Code: Select all

<code>
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 0px;
   margin-right: 0px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
/* barre de menu en générale*/

#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #6655ff;
   /*   border-bottom: 1px solid #C0C0C0; */ 
   width: 100%;
background-image: url(uploads/images/fondboutongrisbleu.jpg);
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 250px; 
height:25px;
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
margin-left:0px;
   padding: 0px; 

}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
background-color: #FF5555 ;
color: #000000; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: 0px;
   float: left; 
/*border-left: 1px solid  #000000;
border-right: 1px solid  #000000;*/
padding-left:2px;
padding-right:2px;
padding-top:2px;
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 

}

/* niveau 1 onglet de la page active */
#primary-nav a { 
   display: block; 
   margin: 0px; 
padding-left:2px;
padding-right:2px;
padding-top:2px;
   text-decoration: none; 
   font-size:16px;
font-weight:bold;
height:25px;
/* Couleur du texte du menu niveau 1 et niveau 2*/
color: white;
background-image: url(uploads/images/fondboutongrisbleu.jpg);


}

/* hover peut être la ?*/
#primary-nav a:hover { 
background-color: #FFFF55 ;
color: #000000; 
background-image: url(uploads/images/fondboutongris.jpg);
}

 /*
#primary-nav li a { 
  border-right: 1px solid #000000;
 
}

#primary-nav li li a { 
border: 1px solid #000000;
/* ne change rien dans le niveau 2 */
/*
color: #000000; 
background-color: #FFFF00;*/
}	


#primary-nav li a:hover { 
/*background-color: #FFFF00 ;
color: #5555ff; */
}

#primary-nav li { 
/*background-color: #0055ff;
background-image: url(uploads/images/fondboutongrisbleu.jpg);*/
 } 


/* L'onglet de la page on on est ? */
#primary-nav li.menuparent { 
 /*  background-color: #0055ff; */
background-image: url(uploads/images/fondboutongrisbleu.jpg);
}




/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
/*   background-color: #55ffff; */
background-image: url(uploads/images/fondboutongris.jpg);
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 

  /* background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; */
}


/* Element de menu niveau 1 si on est au niveau 2 ?? */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
/*color: white ;*/
background-color: #5555ff;
/*background-image: url(upload/images/fondboutongris.jpg);*/
}




/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 

}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 

}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}
</code>

Re: CSSMenu - Horizontal

Posted: Thu Sep 04, 2008 10:42 pm
by Dr.CSS
It's not CMSMS it's the CSS, if you copy your rendered page HTML and css to flat files you would get the same thing...

The thing about ul li is the go in levels so ul holds li first level ul ul is next level of ul with li in it so you have 2 levels ul ul and li li and of course you can go more levels deep if you set you page structure to do it...

Do you have a link to the page as it is easier to help if you do...

Re: CSSMenu - Horizontal

Posted: Fri Sep 05, 2008 6:58 am
by aktos
OK thanks you. I did not know we should have a good level at CSS for cmsms ! I took the original source and I try to change it.

But I almost did what I  wanted to do. The problem I had is when wanted to change for exemple the color of the text of the second level, I changed also the color of the first level !

After hours of try, and a lot of patience I succes ( almost ).

Before trying cmsms : I thought I knew CSS but after I know I just know a part and I have to learn more !