SuperFish Menu

jQuery + transition

by Roberto Apasajja

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="https://raw.github.com/joeldbirch/superfish/master/src/js/superfish.js"></script>
<div class="menu cf responsiveSelectFullMenu">
    <ul class="superfish cf">
        <li class="current_page_item"> <a href="http://design.doddiblog.com/" title="Home"><i class="icon-home"></i><br />Home</a>

        </li>
        <li class="page_item page-item-54"><a href="http://design.doddiblog.com/about/"><i class="icon-book"></i><br />About</a>

        </li>
        <li class="page_item page-item-24"> <a href="http://design.doddiblog.com/contact-us/"><i class="icon-phone"></i><br />Contact Us</a>

        </li>
        <li class="page_item page-item-194"> <a href="http://design.doddiblog.com/gallery-test/"><i class="icon-camera-retro"></i><br
          />Gallery test</a>

        </li>
        <li class="page_item page-item-22"> <a href="http://design.doddiblog.com/links/"><i class="icon-link"></i><br />Links</a>

        </li>
        <li class="page_item page-item-93"> <a href="http://design.doddiblog.com/testing/"><i class="icon-beaker"></i><br />Testing</a>

        </li>
        <li class="page_item page-item-2"> <a href="http://design.doddiblog.com/ukazka-strany/"><i class="icon-zoom-in"></i><br />Ukážka strany</a>

        </li>
    </ul>
</div>

CSS

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
 .cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 .cf {
    *zoom: 1;
}
a {
    display: block;
}
i {
    color: inherited;
    font-size: 2.5em;
    margin: 0 auto;
    display: block;
    transition: all .4s ease 0;
    text-align: center;
}
i:hover {
    margin: 0 auto;
    text-align: center;
}
a {
    color: #D5D5D5;
    font-family:'LucidaGrande', Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.75em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 15px 20px;
    transition: all .4s ease 0;
    display: block;
    text-align: center;
}
a:hover {
    color: #fff;
}
.superfish li {
    float: left;
    position: relative;
    transition: all 0.7s ease 0s;
    margin-right: 1.625em;
}
.superfish li:hover {
    background-color: #5a6e8a;
}
ul {
    list-style: none outside none;
    margin: 0;
    padding-left: 0;
    background-color: #8a6e8a;
}
ul li ul {
    display: none;
}
ul li:hover ul {
    display: inline-block;
    transition: all 0.7s ease 0s
}
ul li:hover ul li {
    display: inline-block;
    transition: all 0.7s ease 0s
}
a[class^="icon-"], a[class*=" icon-"] {
    display: block;
    margin: 0 auto;
}
[class^="icon-"], [class*=" icon-"] {
    text-align: center;
}
/*** ESSENTIAL STYLES ***/
 .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position: absolute;
   ...

JavaScript

$(document).ready(function () {
    $('ul').superfish({
        delay: 300, // one second delay on mouseout
        animation: {
            opacity: 'show',
            height: 'show'
        }, // fade-in and slide-down animation
        speed: 400, // faster animation speed
        autoArrows: true // disable generation of arrow mark-up
    });
    /*    $('li a').mouseover(function() {
            $(this).css('color', '#fff');
            $('i').css('color', '#fff');
        }).mouseout(function(){
            $('i').css('color', '#D5D5D5');
            $(this).css('color', '#D5D5D5');
    });*/
});