Quick Nav:  Online Store   |   Login | Register

Horizontal menu separators...

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
AuthorMessages
DjZ0rKy
<20 Posts
Posts:15


09/10/2008 10:36 AM  

Hi all...

I can't figure it out how to have separators between my menu...

Look a the left top menu here : http://site-internet.ca/montreal/

I want to have between the menus this separator :   ::   Like i have between my language choice to the right...

Here is my css :

#nav {
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 line-height : 1.25em;
 border: solid 0px #000;
 width: 362px;
 
 margin:6px 0 0 0;
 display:block;
 float:left;
}
#nav ul {
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
    list-style:none;
    width:auto;
}

#nav li {
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.6em;
  position: relative;
  list-style: none;
  line-height : 1.25em;
  margin:-1px 6px 0 0;
  float:left;
}

#nav li ul { /* second-level lists */
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 position : absolute;
 left: -999em;
 background-color:#5d7d92;
 border:1px solid #000000;
 padding: 2px;
 float:left
}


#nav a {
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 display:block;
 font-weight:normal;
    text-decoration:none;
    padding :2px 8px 2px 0;
    color:#000000;
    border:0px solid #809DF9;
}
#nav li li a {
 text-align:left;
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.4em;
 margin:4px 0 0 0;
 width:16em;
 float:left;
}

#nav li a:hover {
 font-family:Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 text-decoration:underline;
 color:#666666;
}
#nav.SelectedTab {
 font-family:Arial, Helvetica, sans-serif;
 text-decoration:underline;
}
#nav .DisabledTab {
    color:#ccc;
}
/* no need to change these hover classes
unless you need more than 4 levels */
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{
  left: -999em;
}

#nav li:hover ul,
#nav li.iehover ul {
 top: 1.6em;
 left:0;
}
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul, 
#nav li li li.iehover ul {
 top: 0;
 left:12.8em;
}

 

Can someone help me?

Thanks a lot!

John Mitchell
Posts:3478


09/24/2008 10:15 AM  
Hi, I'm sorry for missing this question earlier.

There are different ways you can do separators. The easiest is to just put a border-right property on the nav li a rule.

One or two of the sample skins in the package have examples.
ech01
<50 Posts
Posts:38


10/09/2008 1:22 PM  
John -
How does one remove the style on the last list item?

home | page1 | page2 | page3
ech01
<50 Posts
Posts:38


10/09/2008 2:22 PM  
I found another post in the forums here that answered my question. It is not possible with the menu Type=Hover. I used jquery to access the last list element and add a class.

[script removed]
ech01
<50 Posts
Posts:38


10/09/2008 2:23 PM  
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">< / script >

< script type="text/javascript" >

var $j = jQuery.noConflict();
$j(document).ready(function(){


$j('#nav > ul > li:last-child').addClass("last");

});


< /script >
Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
Forums >Snapsis Product Support >CSS NavMenu > Horizontal menu separators...



ActiveForums 3.7
Powered by: Snapsis Software