Hover Fix by Hover Intent

بواسطة محمد الحلبي - ترايدنت

by Alhalabi

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div class="menu display">
    <div>القائمة الرئيسية</div>
    <ul>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
    </ul>
</div>

<div class="menu hover">
    <div>القائمة الرئيسية</div>
    <ul>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
    </ul>
</div>

<div class="menu hoverintent">
    <div>القائمة الرئيسية</div>
    <ul>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
        <li><a href="#">معهد ترايدنت</a></li>
        <li><a href="#">محمد الحلبي</a></li>
    </ul>
</div>

CSS

body{direction:rtl;padding:30px;}
.menu{
    float:right;
    margin:20px;
    display:block;
    padding:0 15px;
    color:#ffffff;
    font:bold 12px Tahoma;
    line-height: 30px;
    position:relative;
    cursor:default;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
    border: 1px solid #008dbf;
    background: #33b5e5;
    background: -webkit-gradient(linear, left top, left bottom, from(#33b5e5), to(#0099cc));
    background: -moz-linear-gradient(top, #33b5e5, #0099cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33b5e5', endColorstr='#0099cc');
}
.menu:hover{
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    -ms-border-radius:4px 4px 0 0;
    -o-border-radius:4px 4px 0 0;
    -khtml-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0;
}
.menu ul{
    display:none;
    width:160px;
    position:absolute;
    top:29px;
    right:-1px;
    padding:10px 0 0;
    overflow:hidden;
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    -ms-border-radius:0 0 4px 4px;
    -o-border-radius:0 0 4px 4px;
    -khtml-border-radius:0 0 4px 4px;
    border-radius:0 0 4px 4px;
    background-color:#0099cc;
    border: 1px solid #008dbf;
    border-top:none;
}
.menu.display:hover ul{
    display:block;
}
.menu ul li{
    
}
.menu ul li a{
    display:block;
    padding:0 10px;
    color:#ffffff;
    text-decoration:none;
}
.menu.display ul li a:hover{
    background-color:#0090c0;
}

JavaScript

/* القائمة الثالثة، عند مرور الماوس تعمل بـ hover */
$('.menu.hover').hover(function(){
    $(this).find('ul').slideDown(200);
},function(){
    $(this).find('ul').slideUp(200);
});

/* القائمة الثالثة، عند مرور الماوس تعمل بـ hoverIntent */
$('.menu.hoverintent').hoverIntent(function(){
    $(this).find('ul').slideDown(200);
},function(){
    $(this).find('ul').slideUp(200);
});