نقل قول: ساخت منو های drop down با استفاده از CSS
سلام
ببخشید می بینم که این تاپیک دیگه کسی سر نمی زنه ولی شانسم رو امتحان می کنم :لبخندساده:
من همین منو رو طراحی کردم به جای ul اول عکس گذاشتم
مشکل من این هست که می خوام 3 تا زیر منو داشته باشم ولی وقتی زیر منوی دوم باز می شه زیر منوی 3 هم باز می شه یعنی هر چی تلاش کردم نتونستم زیر منوی سوم خاصیت display:none رو اجرا کنم
اگه ممکن باشه کمکم کنید ممنون می شم:بوس:
2 ضمیمه
نقل قول: ساخت منو های drop down با استفاده از CSS
یه سری از سوالات دوستان رو تو این پست جواب میدم:
نقل قول:
1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟
نقل قول:
سلام آقا عماد من منوي شما رو گذاشتم تو سايتم ولي زير منوها تو ie6 باز نميشن
من بايد چي كار كنم؟
فکر نمی کنم که کار کنه به خاطر وجود کلاس های کاذب hover. من خیلی وقته نه با ie6 و نه 7 دیگه کار نمی کنم، مبنای کارم ie 8 به بالاست.
نقل قول:
2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#
متن داخل تگ a قرار داره بنابراین باید برای a:hover استایل رو بنویسی:
#menu a:hover
{
color: blue;
}
نقل قول:
3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟
یک کلاس جدا مثلا به اسم arrow تعریف کنید و اونو به منو هایی که زیر منو دارن نسبت بدید. به این شکل:
.arrow
{
background: url('arrow.png') no-repeat top right;
}
و هنگام نسبت دادم به زیر منو:
<li><a href="#" class="arrow">C#</a>
<ul>
<li><a href="#">Collections</a></li>
<li><a href="#">Arrays</a></li>
</ul>
</li>
که در نهایت به این شکل میشه:
ضمیمه 66262
نقل قول:
من هر کاری می کنم نمی تونم این استایل رو برای منوی asp.net استفاده کنم. لطفا راهنمائی کنید.
منو های asp.net تک table تولید می کنن که این استایل ها با اون سازگار نیست، چون اینجا مبنای کار ul -li بوده.
نقل قول:
مشکل من این هست که می خوام 3 تا زیر منو داشته باشم ولی وقتی زیر منوی دوم باز می شه زیر منوی 3 هم باز می شه یعنی هر چی تلاش کردم نتونستم زیر منوی سوم خاصیت display:none رو اجرا کنم
برای حل این مشکل میشه از child combinator استفاده کرد که در ادامه توضیح میدم:
دو گزینشگر زیر رو در نظر بگیرید:
ul li { padding: 5px; }
ul > li { padding: 5px; }
در حالت اول که اصطلاحا بهش descendant selector گفته میشه، تمام li هایی که داخل تگ ul قرار دارن تحت تاثیر قرار میگیرن، حالا در هر عمقی که می خوان باشن. مثل:
<ul>
<li>test1</li>
<ol>
<li>test2</li>
</ol>
</ul>
که در واقع تگ li ی داخل ol هم انتخاب میشه.
در مواقعی مثل الان ممکنه نیاز داشته باشیم تا فقط تگ هایی رو تحت تاثیر قرار بدیم که در سطح اول قرار دارن، یعنی تگ li ی test1. تو همچین مواردی باید از combinator selector استفاده بشه. combinator همون علامت < هست که بهش گزینشگر فرزندی هم گفته میشه. در واقع زمانی که از < برای انتخاب که عنصر داخلی استفاده می کنیم، تنها عناصری انتخاب میشن که در سطح اول قرار داشته باشن، نه سطوح داخلی تر. یعنی توی این مثال ما فقط تگ li ی test1 انتخاب میشه.
------------
حالا توی منو ها می تونید تا هر سطحی که لازم دارید زیر منو تعریف کنید. فقط این قسمت از کد های css رو باید تغییر بدید:
#menu ul.submenu li:hover ul
{
display: block;
}
تغییر بدید به:
#menu ul.submenu li:hover > ul
{
display: block;
}
در تصویر بالا می بینید که یه زیر منو برای C# هم اضافه کردم.
فایل ضمیمه رو برای این قسمت و همینطور قرار دادن arrow دانلود کنید.
1 ضمیمه
نقل قول: ساخت منو های drop down با استفاده از CSS
با تشکر از آقا عماد
این کد برای کسانی که احتیاج به منو فارسی دارنضمیمه 71104
فقط مشکلی که دارم اینه که من می خوام منو ها سریع باز نشن بلکه مثلا یک ثانیه تا باز شدن طول بکشن و همچنین بسته شدن هم چند ثانیه طول بکشه
با جاوااسکریپت نباشه بهتره چون بعضی ها جاوااسکریپت رو خاموش می کنن یا توسط IE بعضی از کدهاش بلاک می شه
گفتند با Expression تو Css میشه اینکارو کرد
فقط سر نخ می خوام
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام
من پیشنهاد می کنم برای ایجاد duration از jquery استفاده کنید ولی چون خودتون می گید با جاوااسکریپت نباشه می تونید از css3 و خاصیت transition-duration استفاده کنید
اما در بیشتر مواقع مخصوصا در IE که خودتون اشاره کردید jQuery مطمئن تر هستش
موفق باشید
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام چطور زیر منوهام رو از راست به چپ باز کنم
نقل قول: ساخت منو های drop down با استفاده از CSS
توی این منو شما یکبار id تعریف کردی برای ul و بهش سبک دادی
بعد اومدی نوشتی #menu, #menu ul این یعنی چی چرا دوبار نام id , نوشتی؟
چند بار به ul سبک دادی
از کجا مشخص میشه چی ماله کدومه
؟
نقل قول: ساخت منو های drop down با استفاده از CSS
من تمامی روش ها رو تست کردم این کد هم هست ولی اونی که میخام نشده
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style/general.css" />
<title>Content Managment System</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul id="menu">
<li><a href='#'><span>سایت</span></a>
<ul class="submenu">
<li><a href='#'><span>کنترل پنل</span></a></li>
<li><a href='#'><span>تنظیمات کلی</span></a></li>
<li><a href='#'><span>خروج</span></a></li>
</ul>
</li>
<li><a href='#'><span>کاربران</span></a>
<ul class="submenu">
<li><a href='#'><span>مدیریت کاربران</span></a>
<ul>
<li><a href='#'><span>ایجاد کاربر جدید</span></a></li>
</ul>
</li>
<li><a href='#'><span>ارسال ایمیل گروهی</span></a></li>
</ul>
</li>
<li><a href='#'><span>منوها</span></a>
<ul class="submenu">
<li><a href='#'><span>مدیریت منوها</span></a></li>
<li><a href='#'><span>منوی کاربری</span></a></li>
<li><a href='#'><span>منوی اصلی</span></a></li>
</ul>
</li>
<li><a href='#'><span>محتوا</span></a>
<ul class="submenu">
<li><a href='#'><span>مدیریت مطالب</span></a></li>
</ul>
</li>
<li><a href='#'><span>راهنما</span></a>
<ul class="submenu">
<li><a href='#'><span>راهنمای سیستم مدیریت</span></a></li>
<li><a href='#'><span>سایت پشتیبانی</span></a></li>
</ul>
</li>
</ul>
</body>
</html>
*{
margin:0;
padding:0
}
body {
font: 12px Arial, Tahoma, Verdana;
background: #FFF url(../image/bg.gif) repeat-x;
direction:rtl;
}
#menu, #menu ul {
width:100%;
background:#d7d4cf;
padding:1px 0;
margin:39px 0;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 8pt verdana, arial, helvetica;
}
#menu li
{
float: right;
position: relative;
border: 1px solid #d7d4cf;
background-repeat: no-repeat;
background-position: right;
}
#menu ul
{
position: absolute;
top: -20px;
right: -1px;
width: 150px;
padding: 0;
display: none;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}
#menu a:link, #menu a:visited
{
display: block;
font-size: 0.75em;
text-align: right;
text-decoration: none;
background:#d7d4cf;
color:#000;
width:148px;
height:13px;
padding: 4px 0;
}
#menu li:hover
{
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#d7d4cf;
color:#000;
width:146px;
height:13px;
border-left:1px solid #878480;
border-right:1px solid #878480;
}
#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
right: 150px;
display: none;
}
#menu ul.submenu li:hover > ul
{
display: block;
}
#menu ul a:link, #menu ul a:visited
{
padding-right: 25px;
}
نقل قول: ساخت منو های drop down با استفاده از CSS
ممنون از اموزش
میشه توضیح بدید من یه جا مشکل دارم هر اموزشی که میبینم به این شکل سی اس اس مینویسن و یه کمی گمراه شدم
مثلا این css برای تگ ul هست
#menu ul
{
position: absolute;
top: 25px;
left: -1px;
width: 150px;
padding: 0;
display: none;
}
این کد
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}
چرا یه این شکا هست #menu ul li؟؟؟
یا این #menu a:link, #menu a:visited
چرا دو بخشی هست؟؟ من تو مکانزیم این روش مشکل دارم ممنون میشم توضیح دهید
مثلا اینا چی میگن...قسمت اولش برای چی هست ؟ دومش برای چی؟
#menu li:hover
#menu li:hover ul.submenu
#menu ul.submenu li:hover ul
#menu ul a:link, #menu ul a:visited
نقل قول: ساخت منو های drop down با استفاده از CSS
این کد #menu ul برای قسمت منو ulهست. این کد menu ul li برای li ی که درون ul هست. یا این کد menu a:link, menu a:visited برای عمل لینک a و زمانی که لینک a مشاهده میشه هست.
نقل قول: ساخت منو های drop down با استفاده از CSS
hover یعنی چی؟؟؟a:visited چیه؟؟
این 2 قسمتی ها چطوری کار میکنن
#menu ul a:link, #menu ul a:visited
1 ضمیمه
نقل قول: ساخت منو های drop down با استفاده از CSS
ضمیمه 103204
کلاسهای کاذب هستند که برای نمایش رویدادهای پویا مورد استفاده قرار می گیرند مثل تغییر وضعیت یک کنترل
نقل قول: ساخت منو های drop down با استفاده از CSS
من این منو رو ساختم ولی می خوام زیر منو درست در قسمت پایین منو نمایش داده بشه. آخه زیر منو یکم میاد راست باز میشه