PDA

View Full Version : مشکل در ساخت drop-downl منو


mhd.ghavam
پنج شنبه 12 مرداد 1391, 10:56 صبح
سلام به همه دوستان عزیز خسته نباشید

دوستان من یک مشکلی دارم من احتیاج به یک drop-down منو دارم و می خوام که با CSS بسازم یچیزی ساختم اما جالب نشده(با UL و CSS) توی این منو من چند تا خاصیت لازم دارم براتون مینویسم لطفا کمکم کنید خواهش می کنم کسی همچین کدی داره؟

1- امکان اینکه برای هم گزینه منو یک عکس پس زمینه بگذاریم
2- می خوام که گزینه های منو زیرشاخه داشته باشن و ممکنه زیرشاخه ها هم خودشون زیرشاخه داشته باشن(این خیلی برام مهمه که زیرشاخه ها بتونن زیرشاخه داشته باشن)

لطفا کمکم کنید خدا خیرتون بده
khanlo.javid
پنج شنبه 12 مرداد 1391, 11:49 صبح
دوست عزیز یه سرچ بزنید کلی منوی Drop Down میتونید پیدا کنید که طرح های خیلی جالبی هم دارن فقط یه جستجوی کوچیک تو نت میخواد .





موفق باشید.
EMERTAT
پنج شنبه 12 مرداد 1391, 16:04 عصر
توی نت سرچ کن می تونی پیدا کنی اگه چیزی که مد نظرت بود پیدا نکردی چیزی که می خوای نشونم بده تا بتونم کمکت کنم

در ضمن منو رو تنها با css نمی سازن بلکه برای جلوه دادن بهش از javascript استفاده می کنن

کمک خواستین برام پیغام بزارید :چشمک:
mhd.ghavam
پنج شنبه 12 مرداد 1391, 22:28 عصر
توی نت سرچ کن می تونی پیدا کنی اگه چیزی که مد نظرت بود پیدا نکردی چیزی که می خوای نشونم بده تا بتونم کمکت کنم

در ضمن منو رو تنها با css نمی سازن بلکه برای جلوه دادن بهش از javascript استفاده می کنن

کمک خواستین برام پیغام بزارید :چشمک:


سلام بسیار ممنون که به سؤال من جواب دادید بله میدونم که از javascript هم استفاده می کنن اما از اونجا که زیاد وقت ندارم و زاید javascript بلد نیستم رفتم سراغ CSS
من الان یک منو ساختم خوب هم کار میکنه فقط من یک مشکلی دارم و اون هم اینکه من میخوام گزینه اصلی منو زیرشاخه داشته باشه و زیرشاخه اون هم یک زیرشاخه و این زیرشاخه آخری هم زیرشاخه داشته باشه یعنی اینطوری
گزینه اصلی---->>> زیرشاخه--->>>زیرشاخه---->>> زیرشاخه---->>>زیرشاخه

الان زیرشاخه ها باز میشن اما زیرشاخه دوم رو که باز می کنم اگز زیرشاخه داشته باشه زییرشاخه سوم رو هم همزمان باز میکنه فکر می کنم باید CSS تغییر داده بشه اما نمیدونم چی کار باید بکنم لطفا کمکم کنید این هم از کد


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">


#cssm1 * { padding:0; margin: 0; font: 1em arial; text-align:center; font-size:20px}

#cssm1 { position: absolute; z-index: 99; margin: 0 auto; float: right; line-height: 20px; }

#cssm1 a { display: block; background: #d0d1d3; text-decoration: none; padding: 3px 10px; color:#7c7978 }#cssm1 a:hover { background: #d0d1d3; color:#fff }


#cssm1 ul li, #cssm1 ul li ul li { width: 161px; list-style-type:none; }

#cssm1 ul li { float: right; width: 161px; }

#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 161px;
height:45px;

}

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
display:block;

}

#cssm1:hover ul li:hover ul li:hover ul {
position: absolute;
margin-right: 161px;
margin-top: -20px;
}




</style>

</head><body dir="rtl">


<div id="cssm1">
<ul>
<li><a href="http://www.cafewebmaster.com">صفحه اصلی</a></li>
<li><a href="#">سفرهای پیشین &nbsp; &nbsp; &#187;</a>
<ul>

<li><a href="#">سفر خوزستان &nbsp; &nbsp; &#187;</a>
<ul>
<li><a href="#">سفر به خوزستان &nbsp; &nbsp; &#187;</a>
<ul>
<li><a href="#">سفر به خوزستان</a></li>

<li><a href="#">اختتامیه در همدان</a></li>

</ul>
</li>
<li><a href="#">اختتامیه در همدان</a></li>

</ul>
</li>
</ul>

</li>

<li><a href="#">سفر آذربایجان &nbsp; &nbsp; &#187;</a>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">CSS &nbsp; &nbsp; &#187;</a>
<ul>
<li><a href="#">Left Menu</a>
<li><a href="#">DropDown</a>
<li><a href="#">...</a>
</ul>
</li>
</ul>
</li>

<li><a href="#">ارتباط با ما</a></li>
</ul>
</div>

</body></html>
EMERTAT
پنج شنبه 12 مرداد 1391, 23:56 عصر
من Base براتون طراحی کردم دیگه css با توجه به design سایت خودتون طراحی کنید

اگر کمک یا توضیح خواستید بازم در خدمتم

90643
mhd.ghavam
جمعه 13 مرداد 1391, 08:32 صبح
من Base براتون طراحی کردم دیگه css با توجه به design سایت خودتون طراحی کنید

اگر کمک یا توضیح خواستید بازم در خدمتم

90643

سلام دوست خوبم خیلی ممنون خدا خیرت بده آقا مشکلم حل شد فقط یک مشکلی الان پیش اومده که نوشته های منو میچسبه به بالا من میخوام که از نظر عمودی وسط قرار بگیره اما نمیشه نمی دونم چی کار کنم هرچی هم با CSS ور رفتم نشد من CSS رو جوری که میخواستم تغییر دادم اما این مشکلم حل نشد .برات CSS رو گذاشتم برو ببین ممنون از لطفت خدا خیرت بده

<style type="text/css">
.menu{
text-align: center;
direction: rtl;
font-size:20px;


}

.menu a{
text-decoration:none;
color:#7d7b7a;


}

.menu a:hover{
color:#fff;
}

.menu a img{
border: none;
outline: none;
}

.menu ul{
list-style-type:none;
margin:0;
padding:0px;

}

.menu ul li{
float:right;
position: relative;
width:161px;
height:45px;

background:url(../submenu.gif);
<!-- border : 1px solid #000; -->
}

.menu ul li div li{
float: none;
}

.menu ul li div{
position: absolute;
top:45px;
right:0px;
display:none;
}

.menu ul li div ul li div{
position: absolute;
top:12px;
right:161px;
display:none;
}

</style>
EMERTAT
جمعه 13 مرداد 1391, 10:46 صبح
تگ های li رو پیدا کن و با padding بهشون از کناره ها فاصله بده

در ضمن هنگام تغییر padding تغییر height و width فراموش نشه :چشمک:
mhd.ghavam
جمعه 13 مرداد 1391, 10:56 صبح
سلام من می خوام از نظر عمودی وسط قرار بگیره از نظر افقی رو انجام دادم فقط می خوام از نظر عمودی وسط قرار بگیره میشه یک لطفی کنی و کمکم کنی؟

من الان margin-top دادم اما نشد بکگراند از زیر میزنه بیرون لطفا یک کمکی کن ممنون
EMERTAT
جمعه 13 مرداد 1391, 11:35 صبح
از padding-top استفاده کنید

:لبخند: