Thread: CSS Menu Help

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0

    CSS Menu Help


    I have downloaded a CSS menu and embeded it inot my website but, I need a little help for MouseOver and OnClick fuction. I preferr to deal this function with CSS otherwise JavaScritp will also be preffered .

    my CSS Style Sheet
    ===============================
    ul#menu
    {
    width: 900px;
    height: 43px;
    background: #FFF url("/images/menu-bg.gif") top left repeat-x;
    font-size: 0.8em;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-weight: bold;
    list-style-type: none;
    margin: 0; padding: 0;
    }

    ul#menu li
    {
    display: block; float: left;
    margin: 0 0 0 5px;
    }

    ul#menu li a
    {
    height: 43px;
    color: #777;
    text-decoration: none;
    display: block; float: left;
    line-height: 200%;
    padding: 8px 15px 0;
    }

    ul#menu li a:hover
    {
    color: #333;
    }

    ul#menu li a.current
    {
    color: #FFF;
    background: #FFF url("/images/current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
    }
    ul#menu li a.onMouseOver
    {
    color: #FFF;
    background: #FFF url("/images/current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
    }
    ul#menu li a.onClick
    {
    color: #FFF;
    background: #FFF url("/images/current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
    }
    ===============================

    my HTML code to call

    ===============================

    <link rel="stylesheet" href="css/menu_style.css" type="text/css" />


    <div id="navmenu">
    <ul id="menu">

    <li><a href="index.php" target="_self" title="HOME" class="onMouseOver" onclick="home">HOME</a></li>

    <li><a href="hosting.php" target="_self" title="Web Hosting" class="onMouseOver" onclick="hosting">Web Hosting</a></li>

    <li><a href="hfeatures.php" target="_self" title="Features" class="onMouseOver" onclick="hfeatures">Features</a></li>

    <li><a href="why.php" target="_self" title="Why Us" class="onMouseOver" onclick="why">Why Us</a></li>

    <li><a href="dev.php" target="_self" title="Development" class="onMouseOver" onclick="dev">Development</a></li>

    <li><a href="contacts.php" target="_self" title="Contact Us" class="onMouseOver" onclick="contacts">Contact Us</a></li>
    </ul>

    </div>

    ===============================
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    23
    Rep Power
    0
    I'm lost. You posted a code and said it's not working, but didn't mention what you want it to accomplish by the end of it? How do you want the menu to work?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0

    Question


    I want to use these CSS menu in a website. but these are not working wtih MouseOver and OnClick Function.

    I like that when I move mouse over, these should change color to orange and when same when I click a menu, it should be highlighted with orange given style . like
    ======================
    ul#menu li a.current
    {
    color: #FFF;
    background: #FFF url("/images/current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
    }
    ======================

IMN logo majestic logo threadwatch logo seochat tools logo