Results 1 to 2 of 2

Thread: horizontal CSS menu

  1. #1
    theengineer
    Guest


    Default horizontal CSS menu

    Hi,

    I was needing some pointers or help on which file i should be looking at so i can have a horizontal CSS menu like this Dynamic Drive CSS Library- Chrome Menu Bar


    on my website, I would really appreciate any help you can offer.
    Thanks in advance.

  2. #2
    theengineer
    Guest


    Default Re: horizontal CSS menu

    Ok Seems i got one working (works for me) what i did is the following (hopefuly will help anyone else looking for something
    similar)

    Firstly I opened up main_page.tpl.php from the template dir and added the following after these lines :
    PHP Code:
    </a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>&nbsp;&nbsp;</td>
      </tr>
    </table> 
    PHP Code:
    <table border="0" width=620 cellspacing="0" cellpadding="1" align=center>
    <td valign="middle">
    <tr class="header">
    <div id="chromemenu">
      <ul>
        <li><a href="login.php" title="Link 1"><span><?php echo HEADER_TITLE_MY_ACCOUNT ?></span></a></li>
        <li><a href="shopping_cart.php" title="Link 2"><span><?php echo HEADER_TITLE_CART_CONTENTS ?></span></a></li>
        <li><a href="login.php" title="Link 3"><span><?php echo HEADER_TITLE_CHECKOUT ?></span></a></li>
          </ul>
    </div>  
    </td>
    </tr>
    </table>
    From here i Opened up stylesheet.css from the same template dir and put in the following at the bottom :


    Code:
    /*- Menu Tabs --------------------------- */
    
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #chromemenu{
    width: 99%;
    font-weight: bold;
    font-size: 90%;
    }
    
    #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    #chromemenu ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(images/chromebg.gif) center center repeat-x;
    padding: 5px 0;
    margin: 0;
    text-align: left; /*set value to "right" for example to align menu to the left of page*/
    }
    
    #chromemenu ul li{
    display: inline;
    }
    
    #chromemenu ul li a{
    color: #494949;
    padding: 5px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }
    
    #chromemenu ul li a:hover{
    background: url(images/chromebg2.gif) center center repeat-x;
    }
    
    </style>
    I then ftped the images from Dynamic Drive CSS Library- Horizontal CSS Menus for that particular menu and everything seems to work so far.

Similar Threads

  1. CSS Menu
    By michael_s in forum New osCommerce Contributions
    Replies: 2
    Last Post: 05-06-2007, 08:41 PM
  2. cool menu vs dhtml menu
    By Lara Croft in forum osCMax v2 Features Discussion
    Replies: 3
    Last Post: 01-17-2007, 11:38 AM
  3. Create multple mainpages avail from horizontal dropdown menu
    By fuzzyphil in forum osCmax v2 Customization/Mods
    Replies: 1
    Last Post: 12-23-2005, 08:38 PM
  4. Adding cool menu and keeping the catorory menu???
    By Kyle_Bassett in forum osCmax v2 Customization/Mods
    Replies: 0
    Last Post: 10-18-2005, 09:17 AM
  5. making the catalog menu same style as admin menu
    By starchild in forum osCommerce 2.2 Modification Help
    Replies: 0
    Last Post: 06-01-2003, 04:42 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •