Important Notice from AspDotNetStorefront
It is with dismay that we report that we have been forced, through the action of hackers, to shut off write-access to this forum. We are keen to leave the wealth of material available to you for research. We have opened a new forum from which our community of users can seek help, support and advice from us and from each other. To post a new question to our community, please visit: http://forums.vortx.com
Results 1 to 12 of 12

Thread: horizontal menu

  1. #1
    chrisjob012 is offline Junior Member
    Join Date
    Apr 2009
    Posts
    14

    Default horizontal menu

    Hi,

    I am trying to create a horizontal drop down menu...

    I have catgeories like

    >> Cat A
    >> Sub Cat1
    >> sub cat 2
    >> sub cat 3
    >> Cat B
    >> sub cat 4
    >> sub cat 5
    >> cat C
    >> sub cat 6


    i need the horzontal menu to display the subcategories horizontaly instead of the usual vertical style.

    so if i hover on Cat A
    i need the sub categories to be displayed as
    Sub cat1 | Sub cat 2 | sub cat 3

    Is it possible?

    regards,
    chris

  2. #2
    ASPAlfred is offline Senior Member
    Join Date
    Nov 2007
    Posts
    2,244

    Default

    In the skins/skin_#/menuData.xml file

    change
    Code:
    <item Text="(!menu.Categories!)" LookId="TopItemLook" />
    to
    Code:
    <item Text="(!menu.Categories0!)" LookId="TopItemLook" />

  3. #3
    chrisjob012 is offline Junior Member
    Join Date
    Apr 2009
    Posts
    14

    Default

    yes.... now the parent categories are displayed on the menu...

    i want the sub categories to be displayed beneath the menu if i hover on the main catgeory... in horizontal way...

    Cat A
    Sub cat1 | Sub cat 2 | sub cat 3


    i get the menus working as given in the attached pic... but i need the sub cats arranged horizontally beneath the main categories...

    I hope it is possible...

  4. #4
    chrisjob012 is offline Junior Member
    Join Date
    Apr 2009
    Posts
    14

    Default

    I figured it out...

    set DefaultGroupOrientation="Horizontal" for the menu.


    it is possible to show the sub items always from the left extreme on the menu instead of showing it underneath the main category.

    l

  5. #5
    EggsForBreakfast is offline Member
    Join Date
    Dec 2007
    Posts
    64

    Default

    Hi! Were you able to get this working/styled correctly? I am trying to do the same.

    Thanks,
    EFB

  6. #6
    ASPDNSF Staff - Michael is offline Banned
    Join Date
    Oct 2008
    Posts
    11

    Default horizontal menu

    Hi,

    Go to skins/Skin_#/style.css. Open Style.css and find the CSS code below:


    Code:
    /* COMPONENT ART HORIZONTAL MENU */
    
    .TopMenuGroup
    {
        border: solid 0px #000;
        background-color: transparent;
        line-height:35px;  
    }
    
    .MenuGroup
    {
        border: solid 0px #000;
        color: #000000;
        font-size: 0.8em!important;
        margin: 0;
        background: #F8F8F8 none;
    }
    
    .MenuGroup td, .MenuGroupHover td, .MenuItemHover td, td.MenuItemHover
    {
        color: #4776BD;
    }
    
    .TopMenuItem, .TopMenuItemHover
    {
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        cursor: hand;
        cursor: pointer;
        margin:0;
        padding: 0 1em!important;
        line-height: 35px;
        vertical-align:middle;
        background: url(images/tab-sep.gif) no-repeat top left;
    }
    .TopMenuItem
    {
        background: url(images/tab-sep.gif) no-repeat top left;
    }
    
    
    /*leaf menu items*/
    .MenuItem, .MenuItemHover, .MenuItem td, .MenuItemHover td
    {
        color: #4776BD;
        border: solid 0px white;
        cursor: hand;
        cursor: pointer;
        margin: 0;
        background: #F8F8F8 none;
        width: 100%!important;
    }
    
    .MenuItemHover, .MenuItemHover td
    {
        background: #DCDFE2 none;  
    }
    
    .ScrollItem
    {
        background-color: green;
        font-size: 0.8em;
        border: solid 0px gray;
        cursor: default;
        text-align: center;
    }
    
    .ScrollItemH
    {
        background-color: aqua;
        color: orange;
        font-size: 0.8em;
        border: solid 0px gray;
        cursor: default;
        text-align: center;
    }
    
    .ScrollItemA
    {
        background-color: Lime;
        color: yellow;
        font-size: 0.8em;
        border: solid 0px gray;
        cursor: default;
        text-align: center;
    }
    The CSSCLASS ".TopMenuItem, .TopMenuItemHover" for the MENU.
    The CSSCLASS ".MenuItem, .MenuItemHover, .MenuItem td, .MenuItemHover td" for the submenu.

    Thanks

  7. #7
    EggsForBreakfast is offline Member
    Join Date
    Dec 2007
    Posts
    64

    Default

    Hi - thanks, actually that's not what I meant. The submenu only appears on mouseover of a main menu item, it doesn't stay when you select a category.

    Did you happen to figure out how to keep the submenu showing when you have selected a top level item, instead of going away?

    Thanks!
    EFB

  8. #8
    ASPDNSF Staff - Michael is offline Banned
    Join Date
    Oct 2008
    Posts
    11

    Default horizontal menu

    Can you post URL?

    Thanks.

  9. #9
    chrisjob012 is offline Junior Member
    Join Date
    Apr 2009
    Posts
    14

    Default

    Hi,

    I am trying to create a menu like the one in http://www.lookfantastic.com/

    If you can see, if we click on the main category, the page gets rediected to the catgeory page, and then the sub categories gets displayed. The main category also gets highlighted. the menu deosnt work on hovering.

    Also when you click on any category, its sub category always starts from the left end instead of showing up below the catgory.

    Is it possible to modify the menu to work like this?

    Cheers,
    Chris

  10. #10
    qinfu is offline Junior Member
    Join Date
    Jun 2010
    Posts
    10

    Default

    Quote Originally Posted by AspDotNetStorefront Staff - Alfred View Post
    In the skins/skin_#/menuData.xml file

    change
    Code:
    <item Text="(!menu.Categories!)" LookId="TopItemLook" />
    to
    Code:
    <item Text="(!menu.Categories0!)" LookId="TopItemLook" />
    what is syntax on V9 version? It did not work I put ="(!menu.Categories0!)" in sitemap in the V9.
    I just want to get all the top categories from aspdotnetstorefront, align them on the top menu.

  11. #11
    activee is offline Junior Member
    Join Date
    Jan 2008
    Posts
    16

    Default

    Quote Originally Posted by qinfu View Post
    what is syntax on V9 version? It did not work I put ="(!menu.Categories0!)" in sitemap in the V9.
    I just want to get all the top categories from aspdotnetstorefront, align them on the top menu.

    I would like to know how to do this in V9 as well.

  12. #12
    v-vk is offline Junior Member
    Join Date
    Dec 2010
    Posts
    1

    Question horizontal menu in V9

    i can not find how to do this in V9 as well.

    any ideas?