Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...DNN Nav Menu - Once and for all...DNN Nav Menu - Once and for all...
Previous
 
Next
New Post
10/26/2009 1:05 PM
 

Can someone please provide me with what I need to style a submenu's submenu. I've read the documentation and I know I need something with the .m2-0 I think? But I'm not sure where to add this. Here is my current nav CSS.

#menu
{
    color: #000000;
    height: 27px;
 width:955px;
    background: #4e4e4e url(img/Exal_r3_c1.gif) repeat-x;
    font: bold 11px Verdana;
   
}

/* CSSNodeRoot */
.main_menu_rootitem
{

 float:left;
 padding:6px 12px 0px 12px;;
 text-align:center;
   
   }

/* Menu Node Hover Root */
.main_menu_rootitem_hover
{
 float:left;
 padding:6px 12px 0px 12px;
 text-align:center;
    color: #00a3b4;
}

/* Menu Node Selected Root */
.main_menu_rootitem_selected
{
   
 float:left;
 padding:6px 12px 0px 12px;
 text-align:center;   
    color:#F26B38;
}
   
/* Sub Menu Container */
.main_menu_submenu
{
    border: 1px solid #777;
    background: #ffffff url(img/nav.gif) repeat-x;
 margin-top:5px;
 margin-left:7px;
 font: bold 11px Verdana;
 color:000000;
 z-index: 1000;
 
}


.main_menu_submenu td
{
   
 margin-top:0px!important;
    padding: 5px;
    z-index: 1000;
    text-align: left;
}

/* Sub Menu Hover */
.main_menu_itemhover td
{
    color: #00a3b4;
}

/* Sub Menu Selected */
.main_menu_itemselected td
{
    color:#F26B38;
}

 
New Post
10/27/2009 5:16 PM
 

please help me.

i use the dnn5 and i want to customize the nav menu in right to left mode.

what can i do in vertical mode and horizontal mode.

thanks

 
New Post
10/28/2009 6:26 AM
 

Hie IDn

I would assume you are using the DNNMenuNavigationProvider, and by "right to left mode" you mean "orientation". But here are settings you can play arnd with and hopefully you will "customize" your menu. However for some strange unknown to me the submenus won't show in IE8. Change controlOrientation from Vertical to Horizontal. You can also control how the submenu is displayed by changing the custom atrribute SubMenuOrientation. Hope my assumptions are right.

 

   <dnn:NAV runat="server" id="NAV1"  ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Vertical" CSSControl="mainMenu" />
                                          <dnn:NAV runat="server" id="NAV2" ProviderName="DNNMenuNavigationProvider" CSSControl="mainMenu" >
                                            <CustomAttributes>
                                              <dnn:CustomAttribute Name="AnimationType" Value="Slide" />
                                              <dnn:CustomAttribute Name="EasingType" Value="Sine" />
                                              <dnn:CustomAttribute Name="EasingDirection" Value="In" />
                                              <dnn:CustomAttribute Name="AnimationLength" Value="1" />
                                              <dnn:CustomAttribute Name="AnimationInterval" Value="3" />
                                              <dnn:CustomAttribute Name="RenderMode" Value="Normal" />
                                              <dnn:CustomAttribute Name="SubMenuOrientation" Value="Vertical" />
                                            </CustomAttributes>
                                        </dnn:NAV>

 

and here is the long CSS

 

/*--------- dnn menu style ----------*/
/* main menu td */
.mainMenu
{
    margin-left: 0px;
    font-size: 100%;
    padding: 0 0 20px 0; /*cursor:pointer;     font-size: 11px;      background-color:transparent;     width:216px;*/
}

/* Main Menu Normal */
.mainMenu .root
{   
    margin-left: 0px;
    padding: 0 0 0 20px;
    position: relative;
    float: left;
    line-height: 20px;
    width: 100%;
    list-style: none;
    text-align: left;
    -moz-box-sizing: border-box;
    font-size: 11px;
    display: block;
    width: 100%; /*w\idth : 12.5em;*/
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0;
    /*padding: 0px 45px 4px 20px;*/
    border-bottom: 1px solid #b5954c;
    color: #FFFFFF;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
}


/* Main menu hover */
.mainMenu .hov{
    color:#fff;
    background-color: #d9ae4f;
}

/* Main menu selected */
.mainMenu .sel, .mainMenu .bc {
    color:#FFF;
    background-color: #d9ae4f;
}
.mainMenu table{
    border:1px solid #C0D6E5;
    }

/* SUB Menu Normal */
.mainMenu tr.mi{
    background-color:  #E4C481;
    z-index: 1000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight:bold;
    text-align:left;
    color: #FFFFFF;
    line-height: 20px;
    text-transform:none;
    border-bottom: 1px solid #b5954c;
   
}
.mainMenu tr.mi td{
    padding:  0 0 0 0;
    text-transform:none;
    border-bottom: 1px solid #b5954c;
}

/* SUB Menu hover & selected */
.mainMenu tr.hov {
    background-color: #d9ae4f ;
    padding: 0px 0px 0px 1px;
}

.mainMenu tr.hov td{
    color:#fff;
    text-align: left;
    background-color: #d9ae4f;
}

.mainMenu tr.sel, .mainMenu tr.bc{
    text-align: left;
    background-color: #d9ae4f;
}

.mainMenu tr.sel td, .mainMenu tr.bc td{
    color:#fff;
    text-align: left;
    background-color: #d9ae4f;
}


 

 
New Post
11/4/2009 3:57 PM
 

I read this entire thread and I am still not sure of what I need.

I am using a SeparatorHTML as suggested previously in this post along with the CSS that was suggested.  I am seeing several problems.  My seperator is 32px tall but it is being shrunk down to probably about 25px.   Secondly I have an image that appears on hover and the sperators are are being included in the hover, ideally that wouldn't happen.  Finally, while my menu items are right up against the seperators they still aren't centered between them either.  Any suggestions?

 

Thanks,
Stuart


Hilbert Solutions, LLC
Owner, Hilbert Solutions, LLC
http://www.HilbertSolutions.com
A Dotnetnuke System Integrator
From Module Development to Project Management, your one stop Dotnetnuke Shop
 
New Post
11/15/2009 12:39 PM
 

I'm trying to create a vertical menu. The page structure I have is along the following lines:

Root Page (level 1)
...Child page (level 2)
...Child page (level 2)
......Child page (level 3)
......Child page (level 3)
Root Page (level 1)
...Child page (level 2)
......Child page (level 3)
......Child page (level 3)

So basically I have a three level hierarchy. What I would like to do is if I'm on a root page, display all of that page's children. If I'm on a child of the root page, display all of the siblings of the current page, and all of the children of the current page (statically, not as a mouse-over menu). If I'm on a child of a child of the root page, display all of the parent's siblings, and all of the current page's siblings. That's not overly clear, so here's a quick screen grab from the site concept design:

Basically the above shows how the menu would look for the page Root Page > Mobile > Events. The root page isn't displayed (and shouldn't be as there's a separate horizontal nav object for the root pages). The menu would look the same for the page Root Page > Mobile, showing all the Mobile page's siblings and all of the Events page's siblings, just with a different item highlighted (I'll deal with the highlight in CSS so no need to worry about that).

I've been looking at the parameters for the nav object, and Root will show me all the root pages as well (not what I want because of the separate root nav object), Child will show me all children of the current page (fine for the root page, but no use for pages deeper in the hierarchy), and Same will show me siblingsof the current page (fine for chidlren of the root, but no deeper than that in the hierarchy), and Parent will show me the parents of the current page, which is no use for anything except for pages at the deepest level of the hierarchy, and then doesn't show the siblings of those pages.

I'm happy to use separate skin pages with different configurations for the different levels, but that hasn't seemed to have helped so far.

Also, if I set the ExpandLevels parameter to 1 or 2 etc, the submenus are dynamically shown on mouseover - I want them to be static and shown the whole time.

So, can the above be done or am I stuck with just the siblings of the current page as the best option, or perhaps children of the current page?

Apologies for the somewhat rambling post!

Thanks in advance,

Dan

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...DNN Nav Menu - Once and for all...DNN Nav Menu - Once and for all...


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.

Copyright 2014 by DNN Corp | Terms of Use | Privacy | Design by Parker Moore Design