CSS Menu Tutorial for a menu system similar to 9rules.com

Discussion in 'HTML & Website Design' started by 2bnumber1, May 4, 2007.

0
  1. #1
    Hi folks,
    Just wondering if anyone knows of a tutorial which shows you how to create a similar menu system to the one which is used on 9rules?

    [​IMG]
     

    Attached Files:

    • meun.jpg
      meun.jpg
      File size:
      18.9 KB
      Views:
      872
    2bnumber1, May 4, 2007 IP
  2. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #2
    That wouldn't be very hard. Try something like this:

    #firstcolumn {
width: 140px;
height: 100%;
display: inline;
margin-left: 140px;
font-weight: bold;
font-size: 8pt;
float: left;
color: #D8CE9F;}

#secondcolumn {
width: 140px;
height: 100%;
margin-left: 70px;
display: inline;
font-weight: bold;
font-size: 8pt;
float: left;
color: #D8CE9F;}

#thirdcolumn {
width: 140px;
height: 100%;
margin-left: 50px;
display: inline;
font-weight: bold;
font-size: 8pt;
color: #D8CE9F;
float: left;}
    Code (markup):
    And so on.

    And the HTML should look like this:

    <div id="firstcolumn">
Link
Link
Link
</div>


<div id="secondcolumn">
Link
Link
Link
</div>


<div id="thirdcolumn">
Link
Link
Link
</div>
    HTML:
    Hope this helps! :)

    Kate
     
    Katy, May 4, 2007 IP
  3. jgjg

    jgjg Peon

    Messages:
    595
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you might look for something on http://cssplay.co.uk though not sure if they have this specific one.
     
    jgjg, May 9, 2007 IP