آموزش ساخت منوی آبشاری
کد ها و ابزار های کاربردی , منو
با عرض سلام و احترام خدمت شما کاربران گرامی سایت بزرگ یک لرن
تو این مطلب براتون آموزش ساخت منوی آبشاری با استفاده از html و css رو قرار دادم تا با نحوه ی ساخت اون آشنا بشید و خودتون برای سایتتون منو بسازید .
.:: لطفا برای مشاهده آموزش ساخت منوی آبشاری به ادامه مطلب بروید ::.
![آموزش ساخت منوی آبشاری](http://dl.1learn.ir/hakimi/ready-codes/drap-down-menu/demo.png)
ابتدا شما را دعوت میکنیم از آموزش ویدیویی بسیار حرفه ای ساخت منوی آبشاری دیدن کنید : آموزش ساخت منوی آبشاری حرفه ای
تو این آموزش من اصول طراحی منو رو براتون توضیح میدم و استایل دهیش دیگه به عهده ی خودتونه . البته بعد از آموزش براتون یه منوی آبشاری زیبا قرار دادم .
ابتدا کد html زیر را می نویسیم :
1
2
3
4
5
6
7
8
9
10
11
12
|
< 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> قرار بدید .
1
2
3
4
5
6
7
|
<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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< 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 :
منبع : 1learn . ir
moisrex.rozblog.com/tag/کد+باکس+کشویی+برای+وبلاگ
این کد را درون head صفحه خود قرار دهید: (در صورت وجود فایل جی کوئری در صفحه خط اول را حذف کنید) …,کد باکس کشویی برای وبلاگ,کدستان - مرجع بزرگ کد و ابزار ...
blogers.ir › ... › آموزش جاوا اسکریپت (javascript)
Sep 22, 2013 - که این اسکریپت باعث می شود هر موقع بر روی متن مورد نظر شما کلیک شود یک منو کوچک ظاهر می شود و متن مورد نظر شما در ان قسمت قرار می گیرد کد ...
webniaz.blogfa.com/page/pm2
(آموزش استفاده از کد (منو بخون ✓. کدی که در باکس قسمت پایین هست ( زیر نمونه ) را ... منوی کشویی سمت راست وب به سادگی میتونید عنوان و متن درون منو رو تغیر بدید.
neopersia.org/html/select.xhtml
آموزش نوشتن لیست کشویی و مشخصات تگ select در طراحی فرمهای HTML. ... </select>. در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید: گزینه اول, گزینه ...
bargozidegraph.rzb.ir/tag/کد-متن-کشویی
کد,کد کشو,کد کنار,کد کناری,کد منوی کشویی,کد باز شونده,کد منوی باز شونده,کد متن کشویی,گرافیک,کدهای گرافیکی,,کد متن کشویی,گرافیک با چاشنی عشق.
www.vbiran.ir › ... › پرسش و پاسخ
Apr 19, 2013 - 10 posts - 4 authors
با سلام دوستان یه کد میخوام که چهار عکس مثلا تست 1 تست 2 تست 3 تست 4 کنار هم قرار بگیرند بعد با ماوس رفتند رو هرکدوم یک منوی کشویی وار ...
www.7learn.com › ... › جاوااسکریپت
Sep 18, 2012 - سلام ببخشید یه کدی می خواستم که با گذاشتن اون یه منوی ایجاد بشه که با رفتن موس روش بصورت کشویی باز بشه و متن یا کد دلخواه منو به نمایش در ...
دریافت کد : کد زیر را کپی کرده در بخش تنظیمات وبلاگ در بخش کدهای جاوا اسکریپت بریزید . . آموزش : تنها کاری که لازم شما بکنید در کد زیر بجای متن آماده متن مورد ...
codebazan.ir/ساخت-باکس-زیبا-کشویی/
Jan 16, 2016 - ساخت باکس زیبا کشویی این کد یکی از کدهای زیبا ساز سایت و یا ... http://dl.codebazan.ir/uploads/1509201865.css"type="text/css"media="all">.
Searches related to کد متن کشویی
لیست کشویی در html
تگ select در html
آموزش ساخت منوی عمودی با css
About 348,000 results (0.47 seconds)
Search Results
moisrex.rozblog.com/tag/کد+باکس+کشویی+برای+وبلاگ
این کد را درون head صفحه خود قرار دهید: (در صورت وجود فایل جی کوئری در صفحه خط اول را حذف کنید) …,کد باکس کشویی برای وبلاگ,کدستان - مرجع بزرگ کد و ابزار ...
blogers.ir › ... › آموزش جاوا اسکریپت (javascript)
Sep 22, 2013 - که این اسکریپت باعث می شود هر موقع بر روی متن مورد نظر شما کلیک شود یک منو کوچک ظاهر می شود و متن مورد نظر شما در ان قسمت قرار می گیرد کد ...
webniaz.blogfa.com/page/pm2
(آموزش استفاده از کد (منو بخون ✓. کدی که در باکس قسمت پایین هست ( زیر نمونه ) را ... منوی کشویی سمت راست وب به سادگی میتونید عنوان و متن درون منو رو تغیر بدید.
neopersia.org/html/select.xhtml
آموزش نوشتن لیست کشویی و مشخصات تگ select در طراحی فرمهای HTML. ... </select>. در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید: گزینه اول, گزینه ...
bargozidegraph.rzb.ir/tag/کد-متن-کشویی
کد,کد کشو,کد کنار,کد کناری,کد منوی کشویی,کد باز شونده,کد منوی باز شونده,کد متن کشویی,گرافیک,کدهای گرافیکی,,کد متن کشویی,گرافیک با چاشنی عشق.
www.vbiran.ir › ... › پرسش و پاسخ
Apr 19, 2013 - 10 posts - 4 authors
با سلام دوستان یه کد میخوام که چهار عکس مثلا تست 1 تست 2 تست 3 تست 4 کنار هم قرار بگیرند بعد با ماوس رفتند رو هرکدوم یک منوی کشویی وار ...
www.7learn.com › ... › جاوااسکریپت
Sep 18, 2012 - سلام ببخشید یه کدی می خواستم که با گذاشتن اون یه منوی ایجاد بشه که با رفتن موس روش بصورت کشویی باز بشه و متن یا کد دلخواه منو به نمایش در ...
دریافت کد : کد زیر را کپی کرده در بخش تنظیمات وبلاگ در بخش کدهای جاوا اسکریپت بریزید . . آموزش : تنها کاری که لازم شما بکنید در کد زیر بجای متن آماده متن مورد ...
codebazan.ir/ساخت-باکس-زیبا-کشویی/
Jan 16, 2016 - ساخت باکس زیبا کشویی این کد یکی از کدهای زیبا ساز سایت و یا ... http://dl.codebazan.ir/uploads/1509201865.css"type="text/css"media="all">.