azami.cu@gmail.com | +98912 373 8239

ساخت منو باز شونده زیبا

از مجموعه تکنیک های جاوا اسکریپت - برای حرفه ای شدن
منو,jquery,جی کوئری,نو بازشونده,css,ساخت منو
به همت مهندس اعظمی در 1392/10/06

سلام خدمت شما دوستان عزیز

توی این آموزش ساخت یک منو باز شونده رو براتون درنظر گرفتم که فکر میکنم بدردتون بخوره

لازم به ذکر هستش که بدونید این منو دارای افکتی بسیار زیباست که در قسمت پایین میتونید اون رو مشاهده بفرمائید.

درمرحله اول کدهای استایل

#nav, #nav ul{
margin:0; padding:2px 5px 0px 2px;
list-style-type:none;
list-style-position:outside;
position:relative;line-height:1.5em; 
}

#nav a{
display:block;padding:0px 5px 1px 5px; 
border:1px solid #922EAE;
color:#fff;text-decoration:none;
background-color:#922EAE; 
}

#nav a:hover{
background-color:#fff;color:#333;
}

#nav li{
float:left; position:relative;
}

#nav ul {
position:absolute; display:none;
width:12em; top:1.5em;
}

#nav li ul a{
width:12em; height:auto;
float:left; }

#nav ul ul{
top:auto;
}   

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}



مرحله بعد کدهای jquery

مفهوم چند خط کد زیر بسیار ساده است
در اینجا میگه با قرار گرفتن ماوس بر روی هر عنصر li فرزند ul آن را نمایش بده و با رد شدن ماوس آن را مخفی بکن.

در ساختار منو HTML والد با ul مشخص شده و فرزند آن li هست که هر li می تواند زیر مجموعه ای داشته باشد که در ساختار ul قرار میگرند و این تکرار می تواند تا جایی که بخواهیم عمق داشته باشد.

$(function(){
    $(" #nav ul ").css({display: "none"});
    $(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400);
    },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
    });
});


و در آخر هم کدهای HTML



اینم از دمو:











با تشکر از توجه شما -با عضویت در sarat از آخرین آموزش ها و مطالب با خبر شوید.



Tags:   منو,jquery,جی کوئری,نو بازشونده,css,ساخت منو