آموزش ساخت منوی آبشاری

با عرض سلام و احترام خدمت شما کاربران گرامی سایت بزرگ یک لرن

تو این مطلب براتون آموزش ساخت منوی آبشاری با استفاده از html و css رو قرار دادم تا با نحوه ی ساخت اون آشنا بشید و خودتون برای سایتتون منو بسازید .

.:: لطفا برای مشاهده آموزش ساخت منوی آبشاری به ادامه مطلب بروید ::.

آموزش ساخت منوی آبشاری

ابتدا شما را دعوت میکنیم از آموزش ویدیویی بسیار حرفه ای ساخت منوی آبشاری دیدن کنید : آموزش ساخت منوی آبشاری حرفه ای

تو این آموزش من اصول طراحی منو رو براتون توضیح میدم و استایل دهیش دیگه به عهده ی خودتونه . البته بعد از آموزش براتون یه منوی آبشاری زیبا قرار دادم .

ابتدا کد html زیر را می نویسیم :

<ul class="menu">
    <li><a href="">صفحه اصلی</a></li>
    <li><a href="">امکانات</a>
        <ul>
            <li><a href="">آیتم شماره 1</a></li>
            <li><a href="">آیتم شماره 2</a></li>
            <li><a href="">آیتم شماره 3</a></li>
        </ul>
    </li>
    <li><a href="">ارتباط با ما</a></li>
    <li><a href="">تبلیغات</a></li>
</ul>

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

تو کد بالا من به تگ ul اولی کلاس menu را دادم تا بتونم تو css بهش استایل بدم .

خوب حالا نوبت به استایل دهی منو می رسه . کد زیر رو باید تو تگ <head> صفحتون یا قالبتون استفاده کنید یعنی کد رو بعد از تگ باز <head> و قبل از تگ بسته ی </head> قرار بدید .

<style type="text/css">
.menu{direction:rtl}
.menu li{display:inline-block;}
.menu li ul{position:absolute;padding:0;visibility:hidden}
.menu li ul li{display:block}
.menu li:hover > ul{visibility:visible}
</style>

حالا ببینیم کد بالا چی میگه :

تو خط 2 مقدار direction رو برای کلاس menu برابر rtl قرار دادیم تا منو از راست به چپ نوسته بشه ، برای زبان شیرین فارسی

تو خط 3 توسط سلکتور .menu li به تموم تگ های li داخل کلاس menu مقدار display:inline-block رو دادیم تا آیتم های منو زیر هم نباشن و کنار هم قرار بگیرن .

تو خط 4 تگ ul ای که به عنوان زیر منو هست رو صدا زدیم و مقدار position:absolute رو بهش دادیم تا زیر تگ والد خودش قرار بگیره تا وقتی ماوس روی لینک امکانات قرار گرفت این زیر منو زیرش باز بشه .

مقدار padding رو هم برای این گذاشتیم تا زیر منو از هیچ طرف فاصله نداشته باشه مخصوصا طرف راست . و مقدار visibility رو هم روی مقدار hidden گذاشتیم تا زیر منو در حالت معمولی پنهان باشه .

تو خط 5 هم توسط سلکتور .menu li ul li به تگ های li داخل زیر منو خاصیت display:block رو دادیم تا آیتم های زیر منو ، زیر همدیگه قرار بگیرن .

و در آخر تو خط 6 گفتیم که اگه تگ li ای که داخل کلاس menu هست hover شد (یعنی ماوس روش قرار گرفت) زیر منوش که تگ ul هست توسط مقدار visibility:visible ظاهر بشه .

خوب حالا دیدید منویی که فکر می کردید و فکر میکردم این قدر مشکله ، به همین سادگی ساخته شد .

در آخر به خاطر این که تو این آموزش ما را همراهی کردید تشکر می کنم و این منوی آبشاری رو به شما تقدیم می کنم امیدوارم خوشتون بیاد :

کد html :

<ul class="navbar">
    <li><a href="">صفحه نخست</a></li>
    <li><a href="">امکانات</a>
        <ul>
            <li><a href="">آیتم شماره 1</a></li>
            <li><a href="">آیتم شماره 2</a></li>
            <li><a href="">آیتم شماره 3</a></li>
            <li><a href="">آیتم شماره 4</a></li>
        </ul>
    </li>
    <li><a href="">ارتباط با ما</a></li>
    <li><a href="">تبلیغات</a></li>
</ul>

کد css :

<style type="text/css">
@font-face {
 font-family: 'b yekan';
 src: local('web yekan'), 
 url('http://1learn.ir/wp-content/themes/1learn-V2/font/webyekan.eot?#') format('eot'),
 url('http://1learn.ir/wp-content/themes/1learn-V2/font/webyekan.woff') format('woff'), 
 url('http://1learn.ir/wp-content/themes/1learn-V2/font/webyekan.ttf') format('truetype');
}
body{direction:rtl;}
.navbar{width:1007px;height:50px;margin:0;padding:0;font:13px 'b yekan',Tahoma,Arial;line-height:50px;
background-image:-o-linear-gradient(top,#08435d,#21759a);
background-image:-moz-linear-gradient(top,#08435d,#21759a);
background-image:-webkit-linear-gradient(top,#08435d,#21759a);
background-image:-ms-linear-gradient(top,#08435d,#21759a);
background-image:linear-gradient(to top,#08435d,#21759a)
}
.navbar li:hover{background:url(http://dl.1learn.ir/hakimi/ready-codes/drap-down-menu/arrow.png) center bottom no-repeat;}
.navbar li a:link,.navbar li a:visited,.navbar li a:hover,.navbar li a:active{text-decoration:none;color:#FFF;padding:14px 10px}
.navbar li ul li a:link,.navbar li ul li a:visited,.navbar li ul li a:hover,.navbar li ul li a:active{text-decoration:none;color:#FFF}
.navbar li{display:inline-block;}
.navbar li ul{position:absolute;opacity:0;visibility:hidden;padding:3px 7px;background-color:#165f7f;border-radius:8px;box-shadow:inset 0 0 10px #124e68;line-height:normal;border:1px solid #FFF;transition:all .2s linear;-o-transition:all .2s linear;-ms-transition:all .2s linear;-moz-transition:all .2s linear;-webkit-transition:all .2s linear
}
.navbar li ul li{display:block}
.navbar li ul li:hover{background:none}
.navbar li ul li a:link,.navbar li ul li a:visited{width:100%;float:right;padding:3px 0 8px;color:#fff;background:url(http://dl.1learn.ir/hakimi/ready-codes/drap-down-menu/line.png) center bottom repeat-x}
.navbar li ul li a:hover,.navbar li ul li a:active{color:#2191c2;background-image:url(http://dl.1learn.ir/hakimi/ready-codes/drap-down-menu/line2.png);background-color:rgba(255,255,255,.02)}
.navbar li ul li:last-child a{background-image:none}
.navbar li:hover ul{opacity:1;visibility:visible}
</style>

فرادرس

برچسب ها : ، ، ، ،