Click here to Skip to main content
15,936,362 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
i want help in creating a horizontal menu bar using navigation control of VS and css
for example the menu bar of this site please provide me a code which can help me to create an dynamic and cool looking menu bar
Posted

Use Solution 1 with below mention CSS coding.

CSS
<style type="text/css">
    .menu ul
    {
        border-bottom: 1px solid gray;
    }

    .menu ul li
    {
        border: 1px solid white;
        background-color: gray;
        text-decoration: none;
        padding: 3px;
        margin: 3px;
    }

    .menu ul li a
    {
        color: White;
    }

    .menu ul li a:hover
    {
        font-weight:bold;
    }
</style>
 
Share this answer
 
XML
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menu">
    <Items>
        <asp:MenuItem Text="Home" NavigateUrl="Home.aspx" />
        <asp:MenuItem Text="Contact us" NavigateUrl="ContactUs.aspx" />
        <asp:MenuItem Text="About us" NavigateUrl="AboutUs.aspx" />
    </Items>
</asp:Menu>

This will give you a Horizontal menu.

When it is rendered in browser as HTML, it will be an Unordered list (ul).
So, you can apply CSS styles to classes like .menu ul, .menu ul li, .menu ul li a, .menu ul li a : hover and design it as per your requirement.
 
Share this answer
 
CSS
<style type="text/css">
    .menu ul
    {
        border-bottom: 1px solid gray;
    }

    .menu ul li
    {
        border: 1px solid white;
        background-color: gray;
        text-decoration: none;
        padding: 3px;
        margin: 3px;
    }

    .menu ul li a
    {
        color: White;
    }

    .menu ul li a:hover
    {
        font-weight:bold;
    }
</style>
 
Share this answer
 
Comments
CHill60 3-Jun-15 5:26am    
Copied from Solution 2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900