Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Building Navigation Bars in CSS

building navigation bars css

  • Please log in to reply
 

#1 DesGuru

DesGuru

    Senior Member

  • Designer
  • 220 posts

Posted 09 November 2012 - 12:19 AM

To build a vertical navigation bar in CSS you need to style the <a> elements.
Ex.
a
{
display:block; //displays the links as a block element
width:50px; //specify the width of the block as 50 px
}

To create Horizontal Navigation Bar in CSS we can either use floating or inline floating list items which keeps the links the same size.
Inline List Items: This is done by specifying the <li> elements as inline.
Ex.
li
{
display:inline;
}


Floating List Items: This is done by adding float inside the <li> elements and then specifying a certain width for all <a> elements:
Ex.
li
{
float:left; // block elements will slide next to each other
}
a
{
display:block;// Displays the links as block elements which makes the entire link area clickable
width:40px; // specifying the width of the links as 40px
}





Also tagged with one or more of these keywords: building navigation bars, css

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users