1,105,375 Community Members

How to create horizontal main menus with vertical sub menus by using asp.n

Member Avatar
lavanya uppala
Newbie Poster
12 posts since Dec 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi sirs
I have a problem with Menus and Sub menus.Main menu create horizontally but sub menu alo displayed in Horizontally.I want to Display the horizontal Main menus and vertical sub menus. I am using ASP.net
Thanks in Advance.....

Member Avatar
JorgeM
IT Addict
6,413 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

Are you using an asp.net control for the menu creation? You should be able to simply apply the appropriate style to have the sub-menu come down vertically. If you are using the menu-item, this control is rendrered as a list-item whithin a list, which is generally styled as a block element so that the items are displayed vertically.

I have an example of a Multi-Navigation Menu that you can refer to so you can see how styles (CSS) is applied to get the desired result.

Member Avatar
lavanya uppala
Newbie Poster
12 posts since Dec 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thank you for your reply.I am using the menu item, and alo use the list items but it is not display the vertically. Please suggest me

Thanks in Advance..

Member Avatar
JorgeM
IT Addict
6,413 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

To display them horizontally, just access the properties of the control within your design view, or manually add the orientation attribute. Here is an example...

<asp:Menu runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem Text="item1" Value="item1"></asp:MenuItem>
            <asp:MenuItem Text="item2" Value="item2"></asp:MenuItem>
        </Items>
        </asp:Menu>
Member Avatar
rituu221
Newbie Poster
2 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi dear
try this html code with your .Net platform.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="JavaScript" src="ieHover.js"></script>
    <style type="text/css" media="all">

    #divNav {
        background: transparent url(bk-nav.jpg) no-repeat top left;
        margin: 0;
        padding: 0;
        height: 80px;
        width: 800px;
    }

    #nav {
        position: relative;
        top: 55px;
        height: 80px;
        width: 800px;
    }

    #nav li ul, #nav li ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: left;
        display: block;
        padding-right: 15px;
    }

    #nav li ul {
        display: none;
    }

    #nav li.off ul, #nav li.on ul  { /*put the subnav below*/
        position: absolute;
        top: 25px;
        left: 0;
        padding-top: 15px;
        background: #224d6f;
        height: 28px;
        width: 740px;
        padding-left: 60px;
    }

    #nav li.on ul {
        background: #f90;
    }

    #nav li.on:hover ul, #nav li.over ul { /*for ie*/
        background: #224d6f;
    }

    #nav li a {
        color: #224d6f;
        font-weight: bold;
        display: block;
        width: 93px;
        padding: 0;
    }

    #nav li.on a {
        color: #f90;
    }

    #nav li.on ul a, #nav li.off ul a {
        border: 0;
        float: left; /*ie doesn't inherit the float*/
        color: #f90;
        width: auto;
        margin-right: 15px;
    }

    #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
        background: #224d6f;
    }

    #nav li.on ul {
        display: block;
    }

    #nav li.off:hover ul, #nav li.over ul {
        display: block;
        z-index: 6000;
    }

    #nav li.off a:hover, #nav li.on a:hover { 
        color: #f90;
    }

    /*do the image replacement*/

    #nav li span {
        position: absolute;
        left: -9384px;
    }

    #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
        display: block;
        position: relative;
        height: 26px;
        background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
    }

/*first, put the initial states in place*/

#liRenaissance a {
    background-position: 0 0;
}

#liArtNouveau a {
    background-position: -102px 0;
}

#liModern a {
    background-position: -204px 0;
}

#liPostModern a {
    background-position: -306px 0;
}

#liDigital a {
    background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liModern.on a {
    background-position: -204px -37px;
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
    background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
    background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
    background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
    background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
    background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
    display: block;
    background: #224d6f;
    color: #fff;
    font-family: arial, verdana, sans-serif;
    font-size: small;
}       

#nav li.on ul a {
    background: #f90;
}


    </style>
</head>





<body>
<div id="divNav">
    <ul id="nav">
    <li id="liRenaissance" class="off"><a href="#"><span>Renaissance</span></a>
    <ul>
        <li><a href="#">Brunelleschi</a></li>
        <li><a href="#">Alberti</a></li>
        <li><a href="#">Palladio</a></li>
        <li><a href="#">Michelangelo</a></li>
        <li><a href="#">Bramante</a></li>
    </ul></li>
    <li id="liArtNouveau" class="off"><a href="#"><span>Art Nouveau</span></a>
    <ul>
        <li><a href="#">Mackintosh</a></li>
        <li><a href="#">Guimard</a></li>
        <li><a href="#">Horta</a></li>
        <li><a href="#">van de Velde</a></li>
    </ul></li>
    <li id="liModern" class="on"><a href="#"><span>Modern</span></a>
    <ul>
        <li><a href="#">Sullivan</a></li>
        <li><a href="#">Le Corbusier</a></li>
        <li><a href="#">Mies</a></li>
        <li><a href="#">Gropius</a></li>
        <li><a href="#">Yamasaki</a></li>
    </ul></li>
    <li id="liPostModern" class="off"><a href="#"><span>Postmodern</span></a>
    <ul>
        <li><a href="#">Venturi</a></li>
        <li><a href="#">Eisenman</a></li>
        <li><a href="#">Stern</a></li>
        <li><a href="#">Graves</a></li>
        <li><a href="#">Gehry</a></li>
    </ul></li>
    <li id="liDigital" class="off"><a href="#"><span>Digital</span></a>
    <ul>
        <li><a href="#">Xenakis</a></li>
        <li><a href="#">Lynn</a></li>
        <li><a href="#">Diller+Scofidio</a></li>
        <li><a href="#">Zellner</a></li>
        <li><a href="#">Hadid</a></li>
    </ul></li>
</ul></div>
</body>
</html>

it will design horizontal menus with vertical sub menus.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article