رفتن به مطلب

چگونه دسته بندی موضوعات رو به صورت منوی کشویی در بیارم


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

درود خدمت کاربران و مدیران عزیز .

بنده میخوام دسته بندی سایتم رو به صورت منوی کناری کشویی در بیارم یه نمونه میذارم خدمتتون به این شکل میخوام :

http://webgoo.ir/example/css/css-vertical-menu.html

اگر پلاگینی که دقیقا اینکار رو انجام میده سراغ دارید بگید .

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

بدرود .

لینک به ارسال

نرمافزار میخواین معرفی کنم بهتون؟

البته اگه دقیقا همینو میخواین،این کد اچ تی ام الش هست:


<!--[if IE 6]>
کاربر گرامی، مرورگر شما از امکانات این سایت به درستی پشتیبانی نمی کند، لطفا نسخه مرورگر خود را ارتقا دهید!
<![endif]-->
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="http://webgoo.ir">خانه »</a>
<!-- زیر مجموعه سطح 1 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 1</a></li>
<li><a href="#">منوی زیر مجموعه - 1 »</a>
<!-- زیر مجموعه سطح 2 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
</ul>
</li>
<li><a href="#">منوی زیر مجموعه - 1</a></li>
<li><a href="#">منوی زیر مجموعه - 1</a></li>
</ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خدمات »</a>
<!-- زیر مجموعه سطح 1 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 1</a></li>
<li><a href="#">منوی زیر مجموعه - 1 »</a>
<!-- زیر مجموعه سطح 2 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
</ul>
</li>
</ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید »</a>
<!-- زیر مجموعه سطح 1 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 1 »</a>
<!-- زیر مجموعه سطح 2 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
<li><a href="#">منوی زیر مجموعه - 2</a></li>
</ul>
</li>
<li><a href="#">منوی زیر مجموعه - 1</a></li>
</ul>
</li>
<!-- منوی سطح بالا -->
<li><a href="#">درباه</a></li>
<li><a href="#">تماس</a></li>
</ul>
</div>
<hr>
برای بررسی ویژگی های منو، ماوس را روی یکی از آیتم ها ببرید.

و این کد سی اس اسش:


body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
#vertical-nav {
width:150px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
/*float:right;*/
direction:rtl;
text-align:center;
z-index:1000px;
}
#vertical-nav ul {
margin:0px;
padding:0px;
*border-top:1px #333 solid;/*IE 7*/
}
ul.vertical-top-level {
background-color:#333;
}
#vertical-nav li {
list-style:none;
}
ul.vertical-top-level li {
border-bottom:#fff solid 1px;
}
#vertical-nav a {
color:#fff;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
width:100%;
}
#vertical-nav a:hover{
_background-color:#39C;/*IE 6*/
_display:block;/*IE 6*/
}
#vertical-nav li:hover {
background-color:#39C;
position:relative;
}
ul.vertical-sub-level {
display:none;
}
li:hover .vertical-sub-level {
background-color:#666;
border:#fff solid 1px;
display:block;
position:absolute;
right:150px;
top:0px;
}
ul.vertical-sub-level li {
border:none;
float:right;
width:150px;
*background-color:#666;/*IE 7*/
}
#vertical-nav .vertical-sub-level {
background-color:#666;
}
#vertical-nav .vertical-sub-level .vertical-sub-level {
background-color:#666;
}
li:hover .vertical-sub-level .vertical-sub-level {
display:none;
}
.vertical-sub-level li:hover .vertical-sub-level {
display:block;
*left:0px;/*IE 7*/
}

لینک به ارسال

درود مجدد .

میدونم این کدهاش هستش منظور من نحوه ست کردنش با وردپرس هستش .

یه نمونه واضح تر براتون میدم ببینید :

http://www.linkparsi.com

دسته بندی موضوعاتش رو ببینید سمت راست سایت .

دقیقا همین رو میخوام (سی اس اس هاش برام مهم نیست چون خودم میتونم تغیرش بدم برای من مهم ترین قسمتش کشویی کردنشه)

بدرود .

لینک به ارسال

میتونید توی یک ابزارک ازش استفاده کنید..

لینک به ارسال

ببینید نمیخوام کد اچ تی ام ال باشه !!!! (اچ تی ام ال و سی اس اس رو فولم منتها نحوه ست با وردپرسش رو نمیدونم)

بنده طراح قالب وردپرس هستم این مسئله برای اولین باره بهش برخورد کردم هر بلایی سرش آوردم نشد که نشد تصمیم گرفتم از شما دوستان کمک بگیرم .

قالبی که دارم طراحی می کنم برای فروشگاه وردپرس هستش و مشتری گفته منوهای سمت راست به صورت کشویی باشه (تمام قسمت های قالب تکمیل شده فقط مونده همین کشویی کردن دسته بندی ها)

میخوام هر دسته ای توی پنل وردپرس ساخته شد توی سایت به شکل منوی کشویی مانند سایت www.linkparsi.com بیادش .

اینکار شدنیه چون اگر شدنی نبود سایت لینک پارسی استفاده نمی کرد ازش .

دوستانی که میتونند کمک کنند واجبه - قول میدم این مشکلم برطرف بشه در زمینه طراحی قالب + سوالات وردپرسی و فارسی سازی افزونه و قالب کمکتون کنم .

بدرود .

لینک به ارسال

سلام

به انجمن خوش اومدین

شما از همون کدی که ادرس دایدد میتونید استفاده کنید.

برای دینامیک کردنش هم کافیه اول قابلیت فهرست رو به پوسته اضافه کنید. add menu support to theme

بعد هم کافیه اسم کلاس و یا ای دی مربوط در li و ul مربوط به کد بالا رو به اون اضافه کگنید.

لینک به ارسال

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

http://www.baxcomputer.ir/ns-shop/wp/

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

الان تونستم دسته بندی ها رو به صورت کشویی بیارم داخل بلوک لوازم ولی متاسفانه : 1 - راست چین نیست + 2 - سی اس اسی که میخوام رو هنوز نداره (سی اس اسش با ما شما راست چینش کنید)

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

سلام

میشه در مورد طراحی آرشیو دسته ای سایت آسان دانلود هم توضیح بدید .چجوری میشه توی وردژرس دسته ها را اینجوری نشون داد؟

لینک به ارسال

نمونه توی نت زیاد هست. یک مثال ساده براتون نوشتم:

http://jsfiddle.net/ehSyz/3/

لینک به ارسال

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

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

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

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

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

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

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

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

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