رفتن به مطلب

ساخت منو drop down برای دسته بندی ( موضوعات ) با css


پست های پیشنهاد شده

سلام دوستان من یه منو drop down با css برای بخش موضوعات قالب جدید که دارم طراحی میکنم درست کردم ولی نمیدونم برای زیرمجموعه ها باید از چه اسمی برای کلاس استفاده کنم الان منو با یه ککلاس جدا داره کار میکنه ولی مثلا وقتی کلاس رو به این شکل تعریف میکنم .ul li ul دگه کار نمیکنه و نمیتونه محل زیر منو ها رو مشخص کنه میخام یه موضوعات مثل سایت تورتک به ادرس http://tortak.com/ داشته باشم.( میتونستم برم کدها رو کپی کنم :D اما میخام یاد بگیرم نه فقط مشگلم حل شه ! )

لینک به ارسال

سلام، منوهای آماده زیاد هست که بخواهید از اونها استفاده کنید.

ولی بازهم اگر بخواهید برای یادگیری انجام بدید خب خیلی بهتره.

برای زیرمجموعه ها نیازی نیست کلاسی تعریف کنید. شما میتونید به صورت آبشاری در css بهش مقدار بدین.

یک مثال ساده:

http://www.cssnewbie.com/example/css-dropdown-menu/

لینک به ارسال

ببینید css ای که من نوشتم رو به همراه کدهای html ش lمیطارم الان یه خورده گیج شدم شما میگید نیاز نیست کلاس تعریف کنم و به صورت ابشاری بهش مقدار بدم خب این قسمت مقدار دهی ابشاری رو باد در کدوم بخش کدهای css ام انجام بدم ؟ از چه دستورهایی استفاده کنم ؟؟؟

کدهای css


#menu {
position:relative;
direction:rtl;
}
a{
text-decoration:none;
color:#FFFFFF;
}
a:hover{
color:#FF0000;
background-color:#CCCCCC;
}
#menu {
position:relative;
}
#menu a{
display:block;
width:180px;
padding:8px;
text-align:center;
border:#666 solid 1px;
background-color:#030;
}
#menu ul{
list-style-type:none;
padding-top:0px;
}
#menu li{
float:right;
position:relative;
text-align:center;
}
#menu li ul a{
text-align:center;
border:0px;
border-bottom:solid #F00 1px;
}
#menu ul.p{
display:none;
position:absolute;
top:30px;
margin-right:0px;
padding:0px;
z-index:999;
}
#menu li:hover ul.p{
display:block;
border:1px solid #000;
}
.clear {
clear:both;
}

کدهای html ای که استفاده کردم .


<body>
<div id="menu">
<ul>
<li><a href="#">منو 1 </a>
<ul class="p">
<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="#">منو 2</a></li>
<!--
<li><a href="#">منو 3 </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>
-->
</ul>
<div class="clear"></div>
</div>
</body>

البته این فایل تمرینیم هست و صد در صد منویی که در قالب استفاده میشه از این قشنگتره :D لطفا توضیح بدید تا ملتفت شم ممنون از دوستان

لینک به ارسال

سلام

کدی که شما دادی خیلی ساده هست و اصلا زیر منویی نداره.

بهتر برای یادگیری از آدرس های زیر استفاده کنید:

http://webdesignerwall.com/tutorials/css3-dropdown-menu

+

http://users.tpg.com.au/j_birch/plugins/superfish/

لینک به ارسال

خب منم همین منو ساده رو میخام دیگه مثله قالب جدید سایت iran98.org باشه . اما میخام بدونم نحوه ادرس دهی چطور هست که وقتی موس میره روی دسته مادر زیرمنوهاش ( بچه هاش ) رو نشون میده

لینک به ارسال

شما دو تا آدرسی که دادم رو بررسی کردید؟ خیلی ساده توضیح دادن.

لینک به ارسال

بله دیدم ولی دسته بندی میخام که تو اینترنت اکسپلوره هم جواب بده

لینک به ارسال

superfish بدون مشکل روی همه مرورگرها جواب میده و کار میکنه.

من روی همه پروژه هام از superfish استفاده میکنم.

لینک به ارسال
  • 7 ماه بعد...

superfish بدون مشکل روی همه مرورگرها جواب میده و کار میکنه.

من روی همه پروژه هام از superfish استفاده میکنم.

superfish چی هست حالا؟

لینک به ارسال
  • 8 ماه بعد...

سلام دوستان من یه منو با زیر منو طراحی کردم حالا چطوری به وردپرس وصلش کنم که زیر منو هاش هم کار کنه؟

لینک به ارسال

بهترین راه استفاده از فهرست هست.


http://forum.wp-parsi.com/tutorials/article/3-%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86-%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87-%D8%A8%D9%87-%D9%BE%D9%88%D8%B3%D8%AA%D9%87/

لینک به ارسال

همینی که دادم رو جستجو کنید هم آموزش های متنوعی وجود داره و هم افزونه وجود داره

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...