Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text menu buttons question

    Hello all,

    I have a menu bar on my website styled with CSS, and the buttons which are pictures. When they are hovered with mouse - they change background colour and also swap another picture.

    I'd like to convert the pictures to text, but having trouble doing it (while keeping all the swapping functionality). I usually work with dreamweaver, but don't mind if the solution is in code or a template.

    The site URL is http://www.deepskywatch.com

    Thanks in advance,
    Michael.

  • #2
    Regular Coder
    Join Date
    Jan 2010
    Posts
    127
    Thanks
    9
    Thanked 0 Times in 0 Posts
    http://www.javascriptkit.com/javatutors/crossmenu.shtml

    above link is the source that can replace with your current menu, this can be done using CSS instead of using image to replace the hover effect

  • #3
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Lazyserv, doing things with CSS is why it is in this section of the website. Okay, so to get this straight, you want the onmouseover / onmouseout thing to stay the same, except with text?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #4
    Regular Coder
    Join Date
    Jan 2010
    Posts
    127
    Thanks
    9
    Thanked 0 Times in 0 Posts
    i think my answer did try to answer his question, no? or you expecting me to provide the whole code and do his part for him? instead of providing the whole lum some of code why not i give him the tutorial link so he can style base at what he needs...

    im sorry if i get your question wrong...
    just trying to help and not the other way round

  • #5
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    He's asking for help with CSS, not an entirely new basis for his menu bar. And anyway, I would suggest learning HTML and CSS hard code wise, because WYSIWYG 's do not allows you as much creativity.

    And by the way, it's helping with code, not providing whole new code. I get that you may like it done one way, but he may not be able to make something like that work on his site.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #6
    Regular Coder
    Join Date
    Jan 2010
    Posts
    127
    Thanks
    9
    Thanked 0 Times in 0 Posts
    here u go~ a very basic and simple html css menuu to replace your current javascript menu which is onmouse over effect...
    html:
    Code:
    <div id="nav">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Page</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>
    css:
    Code:
    #nav {
        padding: 6px 0;
        border-bottom:1px solid #ddd;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
    }
    #nav ul {
        text-align:center;
        list-style:none;
        padding:0;
        margin:0;
    }
    #nav ul li {
        vertical-align: top;
        display: inline-block;
        /* if you need ie6/7 support */
        *display: inline;
        zoom: 1;
    }
    #nav a {
        font-size:13px;
        float:left;
        color:#999;
        text-decoration: none;
        padding: 10px 20px;
        cursor: pointer;
    }
    #nav a:hover {
        background:#D9D9DA none;
        color: #fff;
    }
    working example: demo

  • #7
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    I'll try this out


  •  

    Tags for this Thread

    Posting Permissions

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