doejo

CSS/JQuery navigation with menu items enlarging on hover without shifting adjacent elements

Synopsis: Menu (navigation items) are popping out (font-size increased) on hover without pushing/shifting adjacent menu items.
Bonus: How to center navigation of undefined width.

I strongly encourage all web developers (designers, front-end developers or whatever) to solve all layout problems with simple CSS. Only after several hours of lamentation, declaring an anathema on IE6 (and even IE7), you guys are allowed to use a lovely JQuery.

Here is a nice JQuery menu idea, which I quickly made for one of ours recent projects and would like to share with The Web Designing / Developing World :)
Works for all popular browsers (even for our IE6 & IE7).

Description is much longer than describing subject, but everything is pretty simple:
1. assigning each list-item element the width of a nested anchor (including padding);
2. adding new class (increasing font size and removing padding) to current a
3. on mouse enter: assign current anchor and parent list-item width property
4. on mouse leave: remove class with font size enlargement, and remove padding.

<script type="text/javascript">
$(document).ready(function() {                        
        $(".main-menu .wrapper-ul ul li").each( function () {
                $(this).width($(this).children().innerWidth());
         });
        $(".main-menu .wrapper-ul ul li a").mouseenter(function() {    
                $(this).width($(this).parent().innerWidth());
                $(this).addClass("active");    
        });
        $(".main-menu .wrapper-ul ul li a").mouseleave(function() {
                $(this).removeClass("active");
                $(this).addClass("no-padding");    
        });       
});        
</script>

Be careful with paddings: don't make them to small. Otherwise, your enlarged text simply won't fit into its' parent list-item.

<div class="main-menu">
    <div class="wrapper-ul">
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">success stories</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>
</div>

Bonus: a CSS technic to center our menu elements with undefined width.
Here comes the CSS:

.no-padding   { padding:0 !important; }
.main-menu { width: 600px; margin: 0 auto; height: 39px; border: solid 1px #ccc; }
.wrapper-ul { 
    float: left;
    width: 100%;
    overflow: hidden;
    position:relative;
    height: 39px; }
.wrapper-ul ul{ 
    clear: left;
    height: 39px;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center; }
.wrapper-ul ul li{
    display: block;
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 39px;
    position: relative;
    right: 50%; }
.wrapper-ul ul li a{
    display: block;
    line-height: 39px;
    font-size: 12px;
    white-space: nowrap;
    color: #21949e;
    padding: 0 32px;
    text-transform: uppercase;
    text-decoration: none; 
    font-weight: bold; }
.wrapper-ul ul li .active { 
    font-size: 18px; 
    font-weight: bold; 
    margin: 0; 
    padding: 0 !important; 
    text-decoration: none; }

Don't forget to "clear" all floated elements.
Menu text is popping, navigation elements and navigation itself is centered (you don't even need to assign their width by yourself!), everything is W3C valid and cross-browser tested!Ôªø

Masha Front-End Developer & Email Marketing

• Share
• 7 Comments