how to create a horizontal menu bar using navigation control and css

Question

0.00/5 (No votes)

See more:

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 10-Nov-13 21:19pm

siddesh_bobade

Add a Solution

3 solutions

Solution 3

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>

Posted 2-Jun-15 17:45pm

Member 11729950

Comments

CHill60 3-Jun-15 5:26am

Copied from Solution 2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Thahir Ahmed · Accepted Answer · 2013-11-11T00:26:00

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>

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-11-10T21:37:00

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.