40 users online (1 members and 39 guests)  


  Results 1 to 3 of 3

Related

  1. Side by side html tables    Forum: HTML Forum
    Replies: 7
  2. Replies: 3
  3. tables appear side by side?    Forum: HTML Forum
    Replies: 1
  4. Replies: 25
  5. PHP / MYSQL Side Menu    Forum: PHP Forum
    Replies: 6
  1. #1
    keytone's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    11

    I'm trying to find a menu that can be two or three side by side

    Hi everybody, it's me again

    I looking for code fro a menu that I can place side by side.
    I found javascript for a nice one, it has a table with a stack of <td> cells
    containing the link and displays what you a description in the bottom box on mouseover. Trouble is the table only needs to be about 300px wide, enough to display the name of the link. OnMouseOver changes the color of the cell.
    It's great, But I can only use one on the page and I want two or three side but side. I can't write javascript yet, so I've been looking for free code online. I think I've tried 'em all, just about. Below is the page I have one on.
    I would very much appreciate any guidance. Thanks, John

    http://jdsplace.us/test/testpg1.html
    Last edited by HTML; 04-29-2011 at 06:06 AM.

  2. #2
    CAS's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2011
    Posts
    1

    Wink Re: I'm trying to find a menu that can be two or three side by side

    You might want to try a combination of CSS and HTML.

    You might want something like this.

    Code:
    <html>
    <head>
    <style type="text/css">
    //this is the regular, unvisited link
    a:link
    {
    //this lines up the links horizontally
    display:inline;
    
    //this makes the text stand out
    font-weight:bold;
    
    //this makes the lettering red
    color:#FF0033; 
    
    //this makes the background blue
    background-color:#0000cc;
    
    //this is part of what creates a box that the link will be in
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    
    //this is the visited link
    a:visited
    {
    //this lines up the links horizontally
    display:inline;
    
    //this makes the text change from bold to normal when it's visited
    font-weight:normal;
    
    //this makes the lettering red
    color:#FF0033; 
    
    //this makes the background blue
    background-color:#0000cc;
    
    //this is part of what creates a box that the link will be in
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    
    //This makes a visited link italic instead of bold
    font-style:italic;
    }
    
    //this is what happens to a link when you put your cursor on it with the mouse
    
    a:hover
    {
    //this lines up the links horizontally
    display:inline;
    
    //this makes the text stand out
    font-weight:bold;
    
    //this makes the lettering blue
    color:#0000cc;
    
    //this makes the background red
    background-color:#FF0033;
    
    //this is part of what creates a box that the link will be in
    width:120px;
    text-align:center;
    padding:4px;
    
    //This underlines the text in the link when you put the mouse on it
    text-decoration:underline;
    
    //This will change the letters to all capital letters when you put the mouse over them
    text-transform:uppercase;
    }
    
    //this is the link for the page that you are at 
    a:active
    {
    //this lines up the links horizontally
    display:inline;
    
    //this makes the text stand out
    font-weight:bold;
    
    //this makes the text italic
    font-style:italic;
    
    //this makes the lettering white
    color:#FFFFFF; 
    
    //this makes the background blue
    background-color:#0000cc;
    
    //this is part of what creates a box that the link will be in
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    #menulist
    {
    display:inline;
    
    //this keeps the computer from adding bullets or squares to your list
    list-style-type:none;
    
    padding-right:20px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="menucontainer">
    
    <ul id="menulist">
    
    <li id="active"><a href="#" id="current">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    
    </ul>
    </div>
    </body>
    </html>
    If you want more items in your menu, just add more to your list in your HTML. Also, you can change the colors to match your website. All you have to do is to put a dark background color with light text for a regular link, then switch them for a:hover or visit, however you want to set it up.

  3. #3
    hairtreatment's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    8

    Re: I'm trying to find a menu that can be two or three side by side

    Try to search the DHTML at dynamicdrive.com
    Last edited by HTML; 04-29-2011 at 06:06 AM.