Quick Nav:  Online Store   |   Login | Register
Forums >Snapsis Product Support >CSS NavMenu

NavMenu - menu display is not horizontal; submenu is not a hover-popout display

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
jennC
<20 Posts
Posts:10


04/03/2007 6:15 PM  

Would some kind soul please help me out with using the NavMenu properly!?

My code for the skin object is like this . . .

< TD id=navHContainer align="left" nowrap valign="middle" width="100%">
< Snapsis:NavMenu id=ParentTabs CacheTabs="false" DisplayIcon="True" Type="Hover" Level="0-5" runat="server">< /Snapsis:NavMenu>< /TD>< BR >

. . with the navHContainer in the style sheet like this . . .

#navHContainer {
left:400px;
top:110px;
display:block;
width:600px;
}

The above code produces a vertical menu that is an expanded unordered list, like this . . .
http://net.agent16.com/nas2/jcplayground/Home/HomeJCNavMenu/tabid/187/Default.aspx

How can I make this a horizontal menu that looks like this . . .
http://net.agent16.com/nas2/jcplayground/Home/NavMenuDemoHH/tabid/188/Default.aspx

I would be grateful for any coaching!
jc

jennC
<20 Posts
Posts:10


04/03/2007 6:23 PM  
Sorry, but my post, for some unknown reason, is all mangled up . . . I tried but I can't fix it. I hope it is still readable to forum visitors . . .

jc

John Mitchell
Posts:3478


04/03/2007 8:55 PM  
Hi jc,

You will need just a little more CSS than that. :)
Add the following CSS to your Skin.css file:

.TabList {
font-size:75%;
}


/* NavMenu styles start here */

#ParentTabs ul {
padding:0;
margin:0;
list-style:none;
float:left;
width:auto;
background-color:#6CC1F7;
}

#ParentTabs li {
position: relative;
float:left;
line-height : 1.25em;
width: 9em;
list-style: none;
}

#ParentTabs li ul { /* second-level lists */
position : absolute;
left: -999em;
width:13em;
background-color:#6CC1F7;
border:1px solid #809DF9;
}


#ParentTabs a {
font-size:1.08em;
display:block;
text-decoration:none;
text-align:center;
font-weight:bold;
width:8.5em;
padding :2px 0 2px 0;
color:#000;
border:1px solid #809DF9;
background-color:#6CC1F7;
}
#ParentTabs li li a {
width:12em;
}

#ParentTabs li a:hover {
background-color: #fff;
border:1px solid #809DF9;
}
#ParentTabs li a.SelectedTab {
font-size:1.12em;
background-color: #FFF;
}
#ParentTabs .DisabledTab {
color:#ccc;
}
/* no need to change these hover classes
unless you need more than 4 levels */
#ParentTabs li:hover ul ul,
#ParentTabs li:hover ul ul ul,
#ParentTabs li:hover ul ul ul ul,
#ParentTabs li.iehover ul ul,
#ParentTabs li.iehover ul ul ul,
#ParentTabs li.iehover ul ul ul ul{
left: -999em;
}

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


jennC
<20 Posts
Posts:10


04/04/2007 12:44 PM  
Thank you so much, John, for the illumination that I should use the CSS this way. I was very clueless :P

I now have another question about the Admin and Host tab names, but I will post it in a new thread as it is a different topic and not a continuation of the issue here.

Thanks again!
jc

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 > NavMenu - menu display is not horizontal; submenu is not a hover-popout display



ActiveForums 3.7
Powered by: Snapsis Software