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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Enlarge menu tab

    Hi guys,

    I'm currently developing a simple website with a menu bar. Now this bar consists of several tabs, and I want to enlarge the tabs as soon as the user puts the mouse cursor over it.
    To illustrate this, here is the menu bar in normal mode:


    And when the user puts the cursor over the tab "Aktuelles", it should look like this:


    My idea was to use the jQuery-function .animate(), but the problem is that I use one background image for each tab and it is not possible to resize background images. I also tried to the <img> tag and change the height-attribute in the animate() function, but this doesn't work either.

    Well I have no idea left how I could solve this.

    Any help is very welcome.

    Thanks in advance,

    enne

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hi
    You can make with CSS, here's an example of code. Test it to see the result.
    Code:
    <style><!--
    #menuv {
     position:relative;
     padding:2px;
     margin-top:100px;
    }
    
      /* Properties for horizontal menu */
    #menuv li {
     float:left;
     margin:1px 8px;
     border:1px solid blue;
     background-color:#daedfe;
     padding:1px 2px;
     list-style-type:none;
     font-weight:600;
     text-align:left;
     text-decoration:nderline;
    }
    
      /* Properties for vertical menu */
    #menuv li:hover ul {
     display:block;
    }
    #menuv li ul {
     display:none;
     position:absolute;
     bottom:0;
     margin:1px auto 1px -8px;
     background-color:#f0f1fe;
     border:1px dashed blue;
     padding:1px;
    }
    #menuv li ul li {
     position:relative;
     clear:both;
     width:99%;
     margin:1px 0;
     border:none;
     background-color:#edfeed;
     padding:1px;
    }
    
      /* Links in sub-menu */
    #menuv ul li a {
     display:block;
     margin:0;
     font-weight:normal;
     padding:1px;
    }
    #menuv ul li a:hover {
     background-color:#fefefe;
     text-decoration:none;
     font-style:oblique;
    }
    --></style>
    
    <ul id="menuv">
     <li><a href="/" title="Home">Home</a></li>
     <li>CSS Tutorials
      <ul>
       <li><a href="http://www.coursesweb.net/css/css3-new-background-properties_t Border properties">CSS3 Border properties</a></li>
       <li><a href="http://www.coursesweb.net/css/css3-opacity_t opacity">CSS3 opacity</a></li>
      </ul>
     </li>
     <li>HTML Tutorials
      <ul>
       <li><a href="http://www.coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
       <li><a href="http://www.coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
       <li><a href="http://www.coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
      </ul>
     </li>
    </ul>

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Marplo, thanks for your response. Your css-code works well, nevertheless I would prefer an animation to have a nicer look. Fortunately, I've already found a solution. But I'll use your code as javascript-fallback if a user has javascript disabled.
    Thanks for the help


  •  

    LinkBacks (?)


    Posting Permissions

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