ساخت منو های drop down با استفاده از CSS

[emad_67]

سلام دوستان
مدتی پیش یه مقاله در مورد ساخت منو های drop down نوشتم که مسئولین مجله لطف کردن و اونو در مجله درج نمودند. این مقاله رو تصمیم گرفتم در این بخش برای سایر کاربران هم قرار بدم:

منو ها یکی از مواردی هستند که امروزه در بسیاری از سایت ها مورد استفاده قرار می گیرند و علاوه بر زیبایی، انسجام خاصی نیر به بخش های مختلف یک سایت می دهند. در این آموزش قصد دارم نحوه ساخت منو های drop down یا پایین افتادنی را تنها با استفاده از CSS و بدون جاوا اسکریپت آموزش دهم.


http://www.irpcn.com/images/article_images/css/menu01.jpg


در ساخت این منو ها از لیست های نا مرتب(Unordered List) یعنی برچسب های ul-li استفاده خواهیم کرد به طوری که هر عنصر li یکی از گزینه های منوی ما خواهد بود.
برای شروع کار ابتدا نوار منو و گزینه های آن را طراحی می کنیم و سپس زیر منو ها را به آن اضافه خواهیم کرد. کد html زیررا در نظر بگیرید:

<ul id="menu">
<li><a href="#">Main Page</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Front end</a>
<li><a href="#">Menues</a></li>
</ul>در کد بالا بر چسب ul، نوار منو، و هر یک از li ها منو های ما را تشکلیل می دهند.
برچسب های بالا را با استفاده از کد CSS زیر سبک دهی می کنیم:

#menu
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}
#menu li
{
float: left;
margin-right: 3px;
border: 1px solid #ecffec;
}برای تبدیل لیست به یک منوی افقی لازم است خاصیت float: left را به بر چسب های li نسبت دهیم تا هر گزینه به صورت شناور در سمت چپ در بیاید. با شناور کردن بر چسب های li، ارتفاع بر چسب ul صفر می شود، برای حل این مشکل از padding در گزینشگر #menu که به ul نسبت داده شده است استفاده می کنیم و مقدار آن را متناسب با ارتفاع مورد نظر تنظیم می کنیم. در این مثال مقدار 26 پیکسل برای padding-bottom در نظر گرفته شده است. به علت اینکه مرورگرهای مختلف برای خاصیت margin و padding برچسب ul مقدار پیش فرضی را در نظر می گیرند که این مقادیر با هم متفاوت اند و باعث بهم ریختگی در طرح می شود، به همین دلیل از padding به جای padding-bottom استفاده می کنیم و سایر مقادیر آن را برابر صفر قرار می دهیم.
منو های ما تا این لحظه به صورت زیر است:


http://www.irpcn.com/images/article_images/css/menu02.jpg


تا اینجا تقریبا فرم کلی منو شکل گرفته است. برای اضافه کردن زیر منو ها یا در واقع قسمت پایین افتادنی منو از یک بر چسب ul در درون بر چسب li مورد نظر استفاده خواهیم کرد. مثلا فرض کنید می خواهیم به منوی Front end زیر منو های مورد نظر را اضافه کنیم، برای این کار یک برچسب ul درون برچسب li ی مربوط به Front end اضافه می کنیم و زیر منو های مورد نظر را داخل آن قرار می دهیم:

...
<li><a href="#">Front end</a>
<ul class="submenu">
<li><a href="#">Atricles</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Recyle Bin</a></li>
</ul>
</li>
... و برای سبک دهی به آن از CSS زیر استفاده می کنیم:


#menu, #menu ul
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}
#menu li
{
...
position: relative;
...
}
#menu ul
{
position: absolute;
top: 25px;
left: -1px;
width: 150px;
padding: 0;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}توجه داشته باشید که برای عدم تکرار خصوصیات مشترک بین منوی اصلی و زیر منو( ul درونی) از همان سبک های های منوی اصلی استفاده شده و خصوصیات جدید به صورت جداگانه به بر چسب ul درونی نسبت داده شده است. خاصیت position: absolute باعث می شود که زیر منوی ما از جریان کلی صفحه خارج شود و موقعیت و اندازه آن بر روی سایر عناصر تاثیری نداشته باشد. به دلیل اینکه نیاز داریم بر چسب ul را نسبت به بر چسب والد آن یعنی برچسب li موقعیت دهی کنیم، مقدار position: relative را نیز به بر چسب های li نسبت می دهیم. در صورت عدم استفاده از این خاصیت بر چسب ul نسبت به چهارچوب صفحه موقعیت دهی خواهد نیست نه بر چسب li.
خاصیت های اختصاص یافته به برچسب li در گزینشگرli #menu به li های بر چسب ul درونی نیز اختصاص میابند که باعث می شود زیر منو ها نیز از float: left استفاده کنند و به صورت افقی و شناور دربیایند، بنابراین لازم است خاصیت float را در برچسب مربوطه برابر none قرار دهیم تا از این حالت جلوگیری شود.
در نهایت با نسبت دادن سبک های بالا طرح ما به شکل زیر در خواهد آمد:


http://www.irpcn.com/images/article_images/css/menu03.jpg


لینک های منو را نیز به صورت زیر سبک دهی می کنیم:


#menu a:link, #menu a:visited
{
display: block;
font-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#menu li:hover
{
background-color: #ffd98a;
border: 1px solid #000;
}خاصیت display: block را به لینک ها نسبت می دهیم تا لینک ها به صورت یک بلوک نمایش یابند و تمام ناحیه منو را دربرگیرد.
توجه داشته باشید که برای تغییر سبک در کلاس hover، این کلاس بر خلاف اکثر مواقع که به برچسب a نسبت داده می شد، به برچسب li نسبت داده شده است. لازم به ذکر است به دلیل اینکه مرورگر اینترنت اکسپلورر کلاس کاذب hover را تنها برای بر چسب a می شناسد، این جلوه در این مرورگر کار نخواهد کرد. البته در انتها از یک فایل ضمیمه برای اصلاح این مورد در اینترنت اکسپلورر استفاده خواهیم کرد.
با افزودن کد های این مرحله کار سبک دهی به منو پایان میابد و طرح ما به شکل زیر خواهد بود:


http://www.irpcn.com/images/article_images/css/menu04.jpg



حال باید کاری کنیم که تنها در زمان قرار گرفتن موس بر روی منو، زیر منوی آن ظاهر شود.
به این منظور خاصیت display: none را به برچسب ul درونی(#menu ul) نسبت می دهیم تا در شرایط عادی نمایش داده نشود. اما برای نمایش آن باید به نوعی ظاهر شدن زیر منو را به کلاس hover وابسته کنیم:


#menu li:hover ul
{
display: block;
}در کد بالا تنها زمانی display:block به برچسب ul اختصاص میابدکه کلاس hover فعال باشد، یعنی زمانی که موس بر روی li ها قرار گیرد.
با اتمام این قسمت، کار ساخت منو های ما نیز پایان می یابد. شما می توانید با اضافه کردن برچسب های ul و موقعیت دهی آن ها زیر منو هایی را نیز به زیر منو های ساخته شده اضافه نمایید.
نکته:
در بالا گفته شد که مرورگر اینترنت اکسپلورر کلاس کاذب hover را تنها برای برچسب a می شناسد که باعث عدم کارکرد صحیح منو ها در این مرورگر می شود. برای حل این مشکل و شناساندن کلاس های کاذب دیگر از جمله hover، focus، active و ... فایلی با پسوند htc به همراه کد های منو در ضمیمه قرار داده شده است. بعد از دانلود فایل مذکور این کد را به برچسب body صفحه خود اضافه کنید:


body
{
behavior: url("csshover.htc");
}ناگفته نماند که behavior یک خصیصه غیر استاندارد است که تنها در مرورگر اینترنت اکسپلورر شناخته می شود. همچنین فایل htc ضمیمه شده به صورت درونی از جاوا اسکریپت برای شناسایی کلاس های کاذب استفاده می کند بنابراین در صورت غیر فعال بودن جاوا اسکریپت بر روی اینترنت اکسپلورر باز هم مشکل عدم نمایش زیر منو ها به وجود می آید.
موفق باشید
-----------------
ویرایش: برای اضافه کردن زیر منو تا هر سطح دلخواه و همینطور اضافه کردن یک فلِش برای منوهایی که زیر منو دارن به این پست رجوع کنید:
http://barnamenevis.org/showthread.php?170061-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%85%D9%86%D9%88-%D9%87%D8%A7%DB%8C-drop-down-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-CSS&p=1212515&viewfull=1#post1212515

[mostafa612003]

با سلام

اگر بخواهیم منوی عمودی درست کنیم ، چه باید بکنیم؟

منویی که با کوچک و بزرگ شدن صفحه جایش در صفحه عوض نشود

متشکرم

[emad_67]

اگر بخواهیم منوی عمودی درست کنیم ، چه باید بکنیم؟
برای اینکار دیگه شما باید خصیصه float: left رو از li های مربوط به نوار منو حذف کنید. بعد هم یه مقدار موقعیت دهی عناصر باید تغییر کنه.

منویی که با کوچک و بزرگ شدن صفحه جایش در صفحه عوض نشود
این مورد به خود منو بستگی نداره. شما باید اونو در صفحه درست موقعیت دهی کنید.

[azade.kazemi33]

سلام
مرسی بابت این مقاله
میشه بگید از css ها چطور باید استفاده کرد؟آخه من تازه کارم:خجالت:
باید تو یه فایل جدا بنویسم یا تو تگ هد؟ و چه جوری رو ul , il ها اعمال کنم؟

[emad_67]

سلام
مرسی بابت این مقاله
میشه بگید از css ها چطور باید استفاده کرد؟آخه من تازه کارم:خجالت:
باید تو یه فایل جدا بنویسم یا تو تگ هد؟ و چه جوری رو ul , il ها اعمال کنم؟
شما هم می تونی توی فایل خارجی بنویسی و اونو ضمیمه کنی به فایل html و هم داخل تگ head در درون تگ style:

<style type="text/css">

</style>

نمونه کد رو دانلود کنید متوجه میشید به چه شکله.

[azade.kazemi33]

کدوم راه بهتره؟
من واسه پایان نامه ام دارم سایت میسازم ،امنیت و دقیق عمل کردن کدهام واسم مهمه
موقعی که از فایل خارجی استفاده کنم کجای کدهای html بایدکد مربوط به ضمیمه رو وارد کنم ؟
ممنون میشم جواب بدین

[Rejnev]

سلام
برای جمع و جور بودن سایت بهتره یک فایل با پسوند css بسازی و کلاسها رو در اون درج کنی
اینم برای لینک دادنش:

<link href="Style.css" rev="stylesheet" rel="stylesheet" type="text/css" />
که در مثال بالا فایل style.css باید در محل فایل اصلیت باشه(آدرس دهی نسبی)و در تگ head باید بنویسیش

[azade.kazemi33]

سلام دوسستان
خسته نباشید
1.من با کمی تغییر در کدهای این تاپیک یک منو drop down ساختم اما میخوام وقتی موس روی زیر منو میره و زیر منوی این زیر منو نمایش داده میشه کمی از لبه های زیر منوی زیر منو روی زیر منو قرار بگیره ،چه جوری میشه این کار رو انجام داد؟
کد خاصی باید در css اضافه کنم؟

2. من میخوام منوم توی یه جدول تک سلولی پخش بشه ،یعنی اگر جدول من طولش 900 باشه با ارتفاع 20 منو طوری چیده شده باشه که کل 900px رو بگیره،اگه راهنمایی کنید ممنون میشم

[emad_67]

1.من با کمی تغییر در کدهای این تاپیک یک منو drop down ساختم اما میخوام وقتی موس روی زیر منو میره و زیر منوی این زیر منو نمایش داده میشه کمی از لبه های زیر منوی زیر منو روی زیر منو قرار بگیره ،چه جوری میشه این کار رو انجام داد؟به این شکل کد ها رو تغییر بدید:


#menu li
{
float: left;
margin-right: 3px;
border: 1px solid #ecffec;
}
#menu ul
{
position: absolute;
top: 27px;
left: 125px;
width: 150px;
padding: 0;
display: none;
}
#menu ul.submenu ul
{
top: 5px;
left: 140px;
display: none;
}
پارامتر هایی رو که خذف و یا تغییر دادم رو تغییر بدید.

2. من میخوام منوم توی یه جدول تک سلولی پخش بشه ،یعنی اگر جدول من طولش 900 باشه با ارتفاع 20 منو طوری چیده شده باشه که کل 900px رو بگیره،اگه راهنمایی کنید ممنون میشماگر منظورتون عرض زمینه منو هست که مشکلی نداره و با توجه به عرض عنصر پدر تغییر سایز پیدا می کنه ولی اگه میخواین خود منو ها هم فاصلشون با توجه به عرض عنصر پدر تغیین بشه، باید margin-right رو در #menu li به صورت درصدی تعیین کنید.

[azade.kazemi33]

سلام دوسستان
خسته نباشید
1.من با کمی تغییر در کدهای این تاپیک یک منو drop down ساختم اما میخوام وقتی موس روی زیر منو میره و زیر منوی این زیر منو نمایش داده میشه کمی از لبه های زیر منوی زیر منو روی زیر منو قرار بگیره ،چه جوری میشه این کار رو انجام داد؟
کد خاصی باید در css اضافه کنم؟




مرسی
من برای این مشکل که مطرح کردم اینکارا رو انحام دادم و درست عمل میکنه

#menu ul
{
width: 151px;

{



#menu ul.submenu ul
{

right: 150px;

}
البته من منوی از سمت راست میخواستم نه چپ ولی یه چیزی پیش اومده این فایلا رو ببنید.وفتی منوی من فارسی است نمیشه رفت رو زیر منوی آخر .و اینکه وقتی روی منوی اصلی میرمجای بقیه تغییر میکنه

[emad_67]

وفتی منوی من فارسی است نمیشه رفت رو زیر منوی آخر .و اینکه وقتی روی منوی اصلی میرمجای بقیه تغییر میکنه در مورد زیر منوی آخر من که مشکلی ندیدم. کجا منظورتونه؟
اون تغییر مکان کوچکی که به وجود میاد به خاطر اینه که border رو در حالت hover فقط قرار دادین. باید در حالت پیشفرض هم برای li ها border در نظر بگیرید، البته برای اینکه دیده نشه هم رنگ زمینه اونا باید باشه. اینکار رو در فایل ضمیمه انجام دادم من.
ضمنا تگ li رو در زیر منو نبستید:


<li><a href="#">امور ثبت نام</a>
<ul>
<li><a href="#">ثبت نام</a></li>
<li><a href="#">انتخاب واحد</a></li>
<li><a href="#">حذف و اضافه</a></li>
</ul>
</li>

[azade.kazemi33]

در مورد زیر منوی آخر من که مشکلی ندیدم. کجا منظورتونه؟


وقتی میری روی زیر منو بعد میخوایی بری روی زیر منوی اون،نمیشه با موس رفت روی زیر منوی اخر.وفتی روی نوشته زیر منو هستی تا از روی اون نوشته رد میشی.زیر منوی آخر میپره.

[emad_67]

وقتی میری روی زیر منو بعد میخوایی بری روی زیر منوی اون،نمیشه با موس رفت روی زیر منوی اخر.وفتی روی نوشته زیر منو هستی تا از روی اون نوشته رد میشی.زیر منوی آخر میپره.
ظاهرا این مورد یه باگ تو ie هست که تنها موقعی که متن فارسی وارد بشه این حالت پیش میاد.
برای حلش فعلا تنها راهی که به نظرم میرسه اینه که تگ های a رو از بین li ها حذف کنید و فقط li ها باقی بمونن. مثلا به این شکل:


<li>اعتراض به نمرات</li>

بعد می تونید با اندکی تغییر استایل های li همون شکل قبلی رو ایجاد کنید.

[azade.kazemi33]

با سلام
چرا وقتی روی منو میرم رنگ زمینه جدول صفحه ام یک دست میشه؟در صورتی که من براش استایل تعریف کردم که


style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >

[emad_67]

با سلام
چرا وقتی روی منو میرم رنگ زمینه جدول صفحه ام یک دست میشه؟در صورتی که من براش استایل تعریف کردم که


style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >

filter تنها برای ie شناخته شده هست، سایر مرورگر ها اصلا اونو نمیشناسن. برای ایجاد gradient بهتره از تصاویر استفاده کنید.

[azade.kazemi33]

ظاهرا این مورد یه باگ تو ie هست که تنها موقعی که متن فارسی وارد بشه این حالت پیش میاد.
برای حلش فعلا تنها راهی که به نظرم میرسه اینه که تگ های a رو از بین li ها حذف کنید و فقط li ها باقی بمونن. مثلا به این شکل:


<li>اعتراض به نمرات</li>

بعد می تونید با اندکی تغییر استایل های li همون شکل قبلی رو ایجاد کنید.
سلام
بابت کمک هاتون واقعا ممنون
وقتی تگ ش رو برمیدارم تفییری پیش میاد و نمیتونم به شکل بقیه liها درش بیارم.ارتفاعش کمتر میشه نسبت به بقیه.
2. این کدها رو ببینید


<table width="100%" height="25%" border="0" cellspacing="0" cellpadding="0" class="hhh">
<tr>
<td ><ul id="menu" >
<li><a href="#">امور پژوهشی</a></li>
<li><a href="#">امور دانشجویی</a></li>
<li><a href="#">امور آموزشی</a>
<ul class="submenu">
<li><a href="#">شورای آموزشی</a></li>
<li><a href="#">اعتراض به نمرات</a></li>
<li><a href="#">امور ثبت نام</a>
<ul>
<li><a href="#">ثبت نام</a></li>
<li><a href="#">انتخاب واحد</a></li>
<li><a href="#">حذف و اضافه</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">امور مالی</a></li>
</ul></td>
</tr>
</table>


وقتی روی منو میرم تو جدولم تکون میخورن.یعنی بقیه یه کم جابجا میشن.فکر کنم این مشکلو قبلا هم عنوان کردم:خجالت:،نمیدونم شایدم نه.باید چیکار کنم تا این مشکل حل بشه؟
؟

[emad_67]

وقتی تگ ش رو برمیدارم تفییری پیش میاد و نمیتونم به شکل بقیه liها درش بیارم.ارتفاعش کمتر میشه نسبت به بقیه.
همونطور که گفتم باید در خصوصیات li ها تغییر ایجاد کنید. ارتفاع و هرچیزی رو که می خواید در خصوصیات li تعیین کنید(در حال حاضر این پارامتر ها در خصوصیات تگ a تعیین شده).

وقتی روی منو میرم تو جدولم تکون میخورن.یعنی بقیه یه کم جابجا میشن.فکر کنم این مشکلو قبلا هم عنوان کردم:خجالت:،نمیدونم شایدم نه.باید چیکار کنم تا این مشکل حل بشه؟
اولین پست همین صفحه رو بخونید(پست 11)

[azade.kazemi33]

بازم ممنون
آره دیدم همون موقع بسکه اشکال دارم نمیدونم چی پرسیدم:قهقهه::خجالت:
مشکل دومم حل شد فقط راهی نیست که واسه بوردر بشه از یه رنگ به رنگ دیگه ای رسید؟مثل
این کد گه واسه زمینه قرار دادم


style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >

مشکل یه دست شدن رنگ زمینه هم حل شد.... البته اگه باز...:چشمک:

[emad_67]

بازم ممنون
فقط راهی نیست که واسه بوردر بشه از یه رنگ به رنگ دیگه ای رسید؟مثل
این کد گه واسه زمینه قرار دادم


style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >

برای حالت هایی که میخواین gradient داشته باشین، حالا برای رنگ زمینه، border یا موارد دیگه بهتره از تصاویر استفاده کنید و اونو در زمینه تگ مورد نظر قرار بدید.

[nadia2174]

با سلام .
من می خوام وقتی موس رو سطر های Gridview میره ،رنگ زمینه اون سطر تغییر کنه.
چه طور این کارو تو Css انجام بدیم؟
ممنون

[man4toman]

باید به div یک کلاسبدی بعد با جاوااسکریپت با موس آور شدن کلاس رو تغییر بدی :

< div class="tnews" onmouseover="javascript:this.className='tnews2';" onmouseout="javascript:this.className='tnews';">
خودت تعمیمش بده ...

[emad_67]

با سلام .
من می خوام وقتی موس رو سطر های Gridview میره ،رنگ زمینه اون سطر تغییر کنه.
چه طور این کارو تو Css انجام بدیم؟
ممنون
لطفا موضوع رو در تاپیک جدیدی مطرح کن.

باید به div یک کلاسبدی بعد با جاوااسکریپت با موس آور شدن کلاس رو تغییر بدی :

< div class="tnews" onmouseover="javascript:this.className='tnews2';" onmouseout="javascript:this.className='tnews';">خودت تعمیمش بده ...
gridview تگ table تولید می کنه، باید tr رو استایل دهی کرد.

[احمد سامعی]

سلام
من يك منو عمودي با روش آقا عماد نوشتم
تو IE 7 تست كردم مشكلي نداشت اما با موزيلا يا همون Firefox 3.5.1 باز مي كنم زير منو ها نمايش داده نمي شه

دوستان مي تونند بگن مشل از چيه ؟ ( فايل صفحه منو پيوست كردم)

[emad_67]

تو IE 7 تست كردم مشكلي نداشت اما با موزيلا يا همون Firefox 3.5.1 باز مي كنم زير منو ها نمايش داده نمي شهشما توی کلاس Menu_M خصوصیت overflow: hidden قرار دادی، به همین دلیل فقط گوشه ای از زیر منو ها نشون داده میشه. در کل این خصوصیت رو حذف کنید مشکل حل میشه.

[احمد سامعی]

شما توی کلاس Menu_M خصوصیت overflow: hidden قرار دادی،

ممنون درست شد مشكل سر همون بود

يك سوال ديگه من IE 6 ندارم، آيا اين روش پيداسازي منو در IE 6 هم همين رفتار رو داره و بدون مشكل اجرا مي شه يا ممكن خطا اي هم داشته باشه

باز هم ممنون

[emad_67]

يك سوال ديگه من IE 6 ندارم، آيا اين روش پيداسازي منو در IE 6 هم همين رفتار رو داره و بدون مشكل اجرا مي شه يا ممكن خطا اي هم داشته باشه
بله با ie6 هم کار می کنه، منوی شما رو هم تست کردم، مشکلی نداشت.

[احمد سامعی]

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

من با IE 5 و FF 2.1 امتحان كردم فاصله زيرمنوها زياد مي شه و دورتر از فاصله معمولي قرار مي گيره و از دسترس خارج مي شه و نمي شه روش رفت
چطوري مي تونم شرط بزارم اگر IE5 و FF 2.1 بود فاصله كمتر بشه ؟( البته IE 5 مهم نيست چون خيلي كم استفاده مي شه اما موزيلا چرا)

[emad_67]

برای ie میشه از conditional comment ها استفاده کرد. به این شکل:


<!--[if IE 5.5]>
<style type="text/css">
....
</style>
<![endif]-->
اما این مورد فقط برای ie کار می کنه. برای فایرفاکس باید از جاوا اسکریپت استفاده کنی و استایل مربوطه رو تغییر بدی. در مورد firefox فکر نمی کنم زیاد مشکلی باشه چون معمولا افرادی که از فایرفاکس استفاده می کنن مروگرشون رو آپدیت می کنن به ورژن های جدید.

[احمد سامعی]

من تا حالا از اين دستورات شرطي استفاده نكردم (راستش نتونستم)
و فايل css خارجي مي شه بگيد چطوري استفاده كنم همون قسمت مربوطه رو واسم بزاريد يا يك مثال
(شرمنده.......)

[emad_67]

شما کلا باید تگ هایی که می خوای در وزژن خاصی از ie اعمال بشه رو ما بین این دستورات قرار بدی:


<!--[if IE 6]>
// style here
<![endif]-->
حالا فرضا اگر بخوایم توی 6 ie از یک فایل css خارجی استفاده کنیم، باید تگ link رو در بین شرط قرار بدیم:


<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="01.css"/>
<![endif]-->
اگر هم نخواستی از css خارجی استفاده کنی، اینبار باید تگ style رو بین دستورات شرطی قرار بدی:


<!--[if IE 8]>
<style type="text/css">
body
{
background-color: #acacac;
}
</style>
<![endif]-->
موفق باشید

[khady_lovely]

خیلی مملون راستیتش من منوی عمودی رو ساختم ولی استادم گیر داده بود که باید منوی وب سایتم افقی باشه نه عمودی
مطالبت واقعا به دردم خورد خیلی مملون

[atbin2010]

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

[atbin2010]

باسلام
یه مشکل: زیر منوها زیر بقیه عناصر صفحه قرار می گیرند.راهی داره درست شه؟
ممنون

[emad_67]

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

یه مشکل: زیر منوها زیر بقیه عناصر صفحه قرار می گیرند.راهی داره درست شه؟با در نظر گرفتن z-index برای زیر منو ها می تونی مشکل رو حل کنی.

[atbin2010]

آقا عماد سلام
میشه دقیقا بگید این z-index رو کجا باید بنویسم.هر کاری کردم نشد.
مقدارش چند باید باشه؟
از شما ممنونم.

[battak]

منم این مشکل رو دارو و اینکه همون خطایی که گفتین ممکنه در نمایش زیر منو وجود داشته باشه!!
پنهان میشه ولی دیگه رویت نمیشه!

[atbin2010]

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

[emad_67]

میشه دقیقا بگید این z-index رو کجا باید بنویسم.هر کاری کردم نشد.
باید z-index رو برای menu# ul در نظر بگیری. مثلا z-index این تگ ul رو بزار 2، و z-index اون قسمتی که می خوای بیفته زیر منو ها بزار 1.

منم این مشکل رو دارو و اینکه همون خطایی که گفتین ممکنه در نمایش زیر منو وجود داشته باشه!!
پنهان میشه ولی دیگه رویت نمیشه!
احتمالا یه جایی رو اشتباه می کنی، فایل ضمیمه رو دانلود کن و کارت رو با اون مقایسه کن.

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

[atbin2010]

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

[battak]

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

شما میتونین از جدول Html هم استفاده کنین و این کد رو در هر ردیف و یا ستونی قرار بدین. اینطوری وسط سهل هستش، هر طرف که بخوایین منوتون تغیر مکان میده.

[emad_67]

ولی در مورد نمایش در وسط صفحه مشکل باقیه.یعنی منو فقط در سمت راست یا چپ قرار میگیره.
کدت رو بزار اینجا تا چک کنم.

[atbin2010]

سلام
من کلشو گذاشتم توی یک div بعد text-align:center رو ست کردم

[emad_67]

من کلشو گذاشتم توی یک div بعد text-align:center رو ست کردم برای text-align برای وسط چین کردن متن هست، برای وسط انداختن div اینکار رو بکن:


margin: 0 auto;

[madira]

من میخام با کلیک کردن موس روی لینک،زیر منوها باز بشن نه با رفتن موس روی لینکها.چطور میتونم اینکارو انجام بدم.

ممنون از کمکتون.

[emad_67]

من میخام با کلیک کردن موس روی لینک،زیر منوها باز بشن نه با رفتن موس روی لینکها.چطور میتونم اینکارو انجام بدم.
به جای hover باید از کلاس active استفاده کنی.
جواب سوالت در پیام خصوصی:

ولی وقتی تبدیل به active میکنم،وقتی روی لینکها کلیک میکنم زیر منوها ثابت نمیمونه و با برداشتن دست از روی موس زیر منوها باقی نمیمونه.
من میخوام با کلیک روی لینک زیر منوها ثابت نشون داده بشه و با دوباره کلیک کردن روی لینک زیرمنوها به حالت اولیه برگردند.
سلام
برای اینکار باید از جاوا اسکریپت استفاده کنید. یعنی با هر بار کلیک چک کنید اگر منو باز بود اونو ببیندین و اگه بسته بود بازش کنید. با css ممکن نیست. در واقع باید با جاوا اسکریپت خصوصیت display هر منو رو در هر بار تنظیم کنید که باید نمایش داده بشه یا نه.
موفق باشید

[madira]

برای اینکار باید از جاوا اسکریپت استفاده کنید. یعنی با هر بار کلیک چک کنید اگر منو باز بود اونو ببیندین و اگه بسته بود بازش کنید. با css ممکن نیست. در واقع باید با جاوا اسکریپت خصوصیت display هر منو رو در هر بار تنظیم کنید که باید نمایش داده بشه یا نه.

امکان داره نمونه کد جاوا اسکریپت برای اینکارو اینجا قرار دهید؟
ممنون از راهنماییهاتوون.

[emad_67]

امکان داره نمونه کد جاوا اسکریپت برای اینکارو اینجا قرار دهید؟
اینو تست کن:


<ul>
<li id="test" onclick="openClose();"><a href="#">Front end</a>
<ul class="submenu">
<li><a href="#">Atricles</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Recyle Bin</a></li>
</ul>
</li>
</ul>



<script type="text/javascript">
function openClose() {
var ctn = document.getElementById("test").getElementsByTagName("ul");
if (ctn.item(0).style.display == "none")
ctn.item(0).style.display = "";
else
ctn.item(0).style.display = "none";
}
</script>

[yasi_1010]

ميخوام بدونم اگه بخوام لينك به منوهام بدم كچا بايد اينكار رو بكنم؟
من كه لينك هر منو رو به سي اس اس دادم.. حالا لينكاي خودشو چيكار كنم؟

[emad_67]

ميخوام بدونم اگه بخوام لينك به منوهام بدم كچا بايد اينكار رو بكنم؟قبل ساخت منو باید یه خورده html کار کرده باشید، نه اینکه منو رو آماده بخوای استفاده کنی.
لینک ها باید در تگ a که تعریف شده داده بشه دیگه.

<li><a href="#">Recyle Bin</a></li>

[mahsa.n]

سلام من کل کدهای html منو رو در یک

<div style="float:right"
قرار دادم ولی منو و زیر منوهام راست به چپ باز نمیشن
میشه لطفا راهنمایی کنین

[emad_67]

قرار دادم ولی منو و زیر منوهام راست به چپ باز نمیشن
خوب قرار نیست rtl بشن، که. شما متون داخل هر تگ a رو right align کن. border سمت چپ رو هم به سمت راست ببر.

[mahsa.n]

خوب قرار نیست rtl بشن، که. شما متون داخل هر تگ a رو right align کن. border سمت چپ رو هم به سمت راست ببر.


چه جوری border رو ببرم سمت راست؟

[mahsa.n]

من يك منو آماده دانلود كردم اين كاري كه شما گفتين رو انجام دادم ولي همه چيز به هم ميريزه ميشه فايل رو ببينين




body

{

font: x-large Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
ul#nav,ul#nav ul


{

margin: 0;
padding: 0;
list-style: none;
z-index:99;
position:relative;
}
ul#nav


{

width:600px;
margin:auto;
border:1px solid silver;
margin-top:100px;
}
ul#nav li


{

position: relative;
float: right;اين جا رو عوض كردم
width:150px;
}
#nav li ul {
position: absolute;
left: 0;
top: 1em;
margin-left:-999em;/* ie7 doesn't work well with left:-999em but does work better with margin-left */
width:150px;
padding:30px 0 0 0;
background:url(images/trans1px.gif) no-repeat/* 1px transparent gif to help ie keep focus on menu*/
}
#nav li ul ul{
position: absolute;
margin-left:-999em;
left:95%;
top: -30px;
margin-left:100%;
}


/* Styles for Menu Items */
ul#nav li


{

color: #fff;
width:150px;
text-align:center;
}
ul#nav li span


{

float:left;
background:url(images/middle.png) repeat-y 0 0;
width:150px;
}
ul#nav li a


{

display:block;
text-decoration: none;
color: #fff;
width:125px;
padding:6px 5px;
margin:0 0 0 9px;
text-align:center;
float:left;
display:inline;
position:relative
}
ul#nav li li a {text-align:right اين جا رو عوض كردم


}

ul#nav li li b{float:right


;}

ul#nav li.top


,

ul#nav li.base


{

background:url(images/top.png) no-repeat 0 0;
height:17px;
overflow:hidden;
border:none;
}
ul#nav li.base


{

background:url(images/button.png) no-repeat 0 0;
}



ul#nav li li{clear:left


}

/* this sets all hovered lists to red and current item */
#nav li.current a,
#nav li:hover a,
#nav li.iehover a{
color: red;
z-index:999;
}
#nav li:hover li:hover a,
#nav li.iehover li.iehover a,
#nav li:hover li:hover li:hover a,
#nav li.iehover li.iehover li.iehover a,
#nav li:hover li a:hover,
#nav li.iehover li a:hover,
#nav li:hover li:hover li:hover a:hover,
#nav li.iehover li li a:hover,
#nav li:hover li:hover li:hover li:hover a:hover,
#nav li.iehover li.iehover li.iehover li.iehover a:hover {
color: red;
z-index:999;
background:url(images/middle.png) repeat-y 0 0;
border:1px solid C#‎0c0c0;
padding:5px;
}


/* set dropdown to default */
#nav li:hover li a,
#nav li.iehover li a,
#nav li:hover li:hover li a,
#nav li.iehover li.iehover li a,
#nav li:hover li:hover li:hover li a,
#nav li.iehover li.iehover li.iehover li a{
color: #fff;
background:none;
border:none;
padding:6px 5px;
}


ul#nav li:hover ul ul


,

ul#nav li:hover ul ul ul


,

ul#nav li.iehover ul ul


,

ul#nav li.iehover ul ul ul {margin-left:-999em


}


ul#nav li:hover ul


,

ul#nav li li:hover ul


,

ul#nav li li li:hover ul


,

ul#nav li.iehover ul


,

ul#nav li li.iehover ul


,

ul#nav li li li.iehover ul {margin-left:0


}


/* Float clearing */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/*........... do not change or amalgamate the above clearfix styles..................*/

[madira]

اینو تست کن:


<ul>
<li id="test" onclick="openClose();"><a href="#">Front end</a>
<ul class="submenu">
<li><a href="#">Atricles</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Recyle Bin</a></li>
</ul>
</li>
</ul>


<script type="text/javascript">
function openClose() {
var ctn = document.getElementById("test").getElementsByTagName("ul");
if (ctn.item(0).style.display == "none")
ctn.item(0).style.display = "";
else
ctn.item(0).style.display = "none";
}
</script>

ممنون دوست عزیز.از کد شما استفاده کردم.به جای " " در if باید از خاصیت Block استفاده میشد.همچنین یک سوال داشتم اگه بخام از این کد واسه جاهای مختلف استفاده کنم به جای test در قسمت getelementbyid چی باید بزارم؟

[emad_67]

همچنین یک سوال داشتم اگه بخام از این کد واسه جاهای مختلف استفاده کنم به جای test در قسمت getelementbyid چی باید بزارم؟
برای استفاده در چند جا بهتره به این شکل عمل کنید:


<li onclick="openClose(this);"><a href="#">Front end</a>
<ul class="submenu">
<li><a href="#">Atricles</a>
<ul>
<li><a href="#">C#</a></li>
<li><a href="#">Delphi</a></li>
<li><a href="#">SQL Server</a></li>
</ul>
</li>
<li><a href="#">Users</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Recyle Bin</a></li>
</ul>
</li>



<script type="text/javascript">
function openClose(elm) {
var ctn = elm.getElementsByTagName("ul");
if (ctn.item(0).style.display == "none")
ctn.item(0).style.display = "block";
else
ctn.item(0).style.display = "none";
}
</script>

در واقع رفرنسی به خود تگ li رو ارسال کنید به تابع جاوا اسکریپت و ادامه ماجرا.

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

[madira]

<div class="navvy">
<ul class="navvylist">
<li><span lang="fa"><a href="index.aspx">صفحه اصلی</a></span></li>
<li><span lang="fa"><a href="#">درباره ما</a></span>
<ul>
<li><span lang="fa"><a href="history.aspx">تاریخچه شرکت</a></span></li>
</ul>
<ul>
<li><span lang="fa"><a href="zamine-kari.aspx">زمینه کاری</a></span></li>
</ul>
<ul>
<li><span lang="fa"><a href="ahdaf.aspx">دورنما،ماموریت و اهداف</a></span></li>
</ul>


</li>
<li><span lang="fa"><a href="contacts.aspx">ارتباط با ما</a></span></li>
<li><span lang="fa"><a href="sitemap.aspx">نقشه سایت</a></span></li>
<li><span lang="fa"><a href="#">محصولات و خدمات</a></span>

<ul>
<li title=": ره نگار | Rah Negar Co :"><span lang="fa"><a href="#">GPS</a></span>

<ul>
<li><span lang="fa"><a href="gps-dasti.aspx">دستی</a></span></li>
</ul>



<ul>
<li><span lang="fa"><a href="#">دریایی</a></span></li>
</ul>
</li>
</ul>
<ul>
<li><span lang="fa"><a href="#">خودرویی - ناوبری</a></span>

<ul>
<li><span lang="fa"><a href="#">خودرویی</a></span>

<ul>
<li><span lang="fa"><a href="multimedia.aspx">Multimedia</a></span></li>
</ul>



</li>
</ul>

<ul>
<li><span lang="fa"><a href="mobile.aspx">موبایل</a></span></li>
</ul>


</li>
</ul>
<ul>
<li><span lang="fa"><a href="#">ردیابی</a></span>


<ul>
<li><span lang="fa"><a href="gps-dasti.aspx">جایاب (Online)</a></span>


<ul>
<li><span lang="fa"><a href="gps-dasti.aspx">دزدگیر ماهواره ای</a></span></li>
</ul>

</li>
</ul>




</li>
</ul>



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

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

من میخام با کلیک روی هرکدوم از لینکهای منوی اصلی زیر منوی مربوط به اون باز بشه و در اون زیر منو هم با کلیک بر روی لینک اون زیر منوی مربوط به اون لینک باز بشه(در واقع یک منوی تودرتو دارم).

کد اولی که شما دادید در صورتیکه که برای هر من اون تابع جاوا اسکریپت رو تکرار کنم جواب میداد .و این کد دوم هم واسه یک لینک منو جواب داد.

در واقع من کدی میخام که مثلا مقدار id هر تگ li رو به تابع پاس بده و اون تابع منو و زیر منوهاش رو باز و بسته کنه.

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

[emad_67]

در واقع من کدی میخام که مثلا مقدار id هر تگ li رو به تابع پاس بده و اون تابع منو و زیر منوهاش رو باز و بسته کنه.این موردی که می خوای مستلزم تغییر ساختار منو هست، چون با این ساختار فعلی و کاری که شما می خوای بکنی مشکل ایجاد می کنه، یعنی تنها می تونید بیرونی ترین منو رو باز بسته کنید.

[sm_mgh]

سلام

ممنون از کدی که گذاشته اید اما من دقیقا از نمونه کد گذاشته شده همراه با فایل مربوطه استفاده کردم ولی زیر منو را نمی توانم ببینم ممنون می شم اگه راهنمایی ام کنید.

[sm_mgh]

من کد را هم براتون فرستادم

[emad_67]

سلام

ممنون از کدی که گذاشته اید اما من دقیقا از نمونه کد گذاشته شده همراه با فایل مربوطه استفاده کردم ولی زیر منو را نمی توانم ببینم ممنون می شم اگه راهنمایی ام کنید.
قسمت class="sumenu" رو ننوشته بودی:


<li><a href="#">Front end</a>
<ul class="submenu">
<li><a href="#">Atricles</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Recyle Bin</a></li>
</ul>

</li>

[alihooman]

سلام
1.من چون میخام منو فارسی باشی، راست چین اش کردم. ولی زیر منوها رو نتونستم راست چین کنم.چی کار کنم؟
2.مربع خاکستری که کنار گزینه های زیرمنو هست، توسط کدوم کد درست میشه؟ چون میخام اونم راست چین باشه.
ممنون میشم اگه راهنماییم کنین.

[sahel65]

آقا عماد از کارتون لذت بردم، میشه بگید شما چه مدت روی طراحی و کار با css زمان گذاشتید؟
آیا مطالعه هم داشتید و یا از راه تمرین و ممارست توانایی های خودتون رو بالا بردید؟
با تشکر

[emad_67]

آقا عماد از کارتون لذت بردم، میشه بگید شما چه مدت روی طراحی و کار با css زمان گذاشتید؟
آیا مطالعه هم داشتید و یا از راه تمرین و ممارست توانایی های خودتون رو بالا بردید؟
ممنون، لطف داری
برای شروع من کتاب "101 نکته و ترفند برای استفاده از css در طراحی وب" رو خوندم. کتاب خیلی خوبی هست و تا حد زیادی دستم رو راه انداخت. بعد هم که خوندن مقالات (بیشتر عملی) از اینترنت و تمرین بود که باعث شد یه مقدار مسلط تر بشم.
موفق باشید

[jafar1374]

سلام
آیا میشه این راه رو برای سایت آگهی هم استفاده کرد؟
مثلا: برای اینها
املاک - صنعت و غیره
و کاری کرد که زیر منوهای اینا هم به اون شکل بیان:قلب:
--------------------
اینم کدش هست

<a href="{$patch_url}/{$md_block_advertisement_main_cat_list.id}/index.html">
<img alt="بخشها" src="{$md_block_advertisement_main_cat_list.pic}" width="24" border="0" height="20">
<br />
{$md_block_advertisement_main_cat_list.title}

[sahel65]

ممنون از پاسختون! اتفاقا من هم همون کتاب رو دارمش!
یه سوال؟؟
یکی از دوستان توی یه پست جدیدی که ایجاد کرده بود در خصوص راست چین کردن ازتون سوال کرده بود که شما جوابشو داده بودید!

http://www.barnamenevis.org/forum/showthread.php?p=1054917
در انتها گفته بودید همرو داخل یه div بذاره و خاصیت float اونو به right تعمیم بده!
میخوام ببینم همینجوری درسته:



<div id="forright">
<ul id="menu">
<li><a href="#">Main Page</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Front end</a>
<ul class="submenu">

<li><a href="#">Atricles</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Recyle Bin</a></li>
</ul>
<li><a href="#">Menues</a></li>
</ul>
</div>

------------------

این هم div مربوطه:



#forright
{
float:right;
}

[emad_67]

سلام
آیا میشه این راه رو برای سایت آگهی هم استفاده کرد؟
مثلا: برای اینها
املاک - صنعت و غیره
و کاری کرد که زیر منوهای اینا هم به اون شکل بیان:قلب:
والا این چیزی که دادی اصلا معلوم نیست چیه.

یه سوال؟؟
یکی از دوستان توی یه پست جدیدی که ایجاد کرده بود در خصوص راست چین کردن ازتون سوال کرده بود که شما جوابشو داده بودید!

http://www.barnamenevis.org/forum/sh....php?p=1054917 (http://www.barnamenevis.org/forum/showthread.php?p=1054917)
در انتها گفته بودید همرو داخل یه div بذاره و خاصیت float اونو به right تعمیم بده!
میخوام ببینم همینجوری درسته:
بله درسته، دیگه بسته به نیازتون می تونید هر تغییری که بخواید بدید.

[davood59]

آقا عماد سلام؛
چند روزه که مقالات شما رو دیدم و از خوندن اونا لذت بردم ، همچنین در یادگیری نیز فوق العاده مفید و موثر بود.
لطفا هنوز هم مقالات خوب خودتون رو تو این سایت بذارید.
چون دکمه تشکر به تنهایی کافی نیست بازهم ازتون متشکرم.

[jafar1374]

آقا به داد من برسیم
من می خوام منوی بخشهای سایت اگهیم رو drop down کنم ولی کدهام اینجوریه چیکار کنم ؟

<table dir="rtl" width="600" border="0" cellspacing="0">
<tbody><tr>
{if $md_block_advertisement_main_cat_list }
{foreach from=$md_block_advertisement_main_cat_list item="md_block_advertisement_main_cat_list"}
<td>
<a href="{$patch_url}/{$md_block_advertisement_main_cat_list.id}/index.html">
<img alt="بخشها" src="{$md_block_advertisement_main_cat_list.pic}" width="24" border="0" height="20">
<br />
{$md_block_advertisement_main_cat_list.title}
</font>
</a>
</td>
{/foreach}
{else}
<td class="noresult">&nbsp;</td>
{/if}
</tr>
</tbody></table>

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

[Khalil morradi]

ممنون از توضیحاتتون
من یک مشکل با منو طراحی شده در ie6 دارم توی این نسخه از اکسپلورر منو های من دیده میشه و hover اونها هم درست کار میکنه اما مشکلم اینه که اولا جای ساب منوها درست نیست و بهم ریخته است ثانیا بین آیتمهای آن فاصله وجود دارد (یعنی یک ساب منو یکپارچه ندارم و زیر هر آیتم منو یک فضای خالی وجود دارد ) و ثالثا منوی منو ها روی هم می افتند و زیرش هم دیده میشه من نمونه کدهامو براتون فرستادم

لطفا کمکم کنید

[battak]

آقا عماد این چندمین بار هست که من به این تاپیکتون میام و ازش استفاده میکنم. دستتون درد نکنه.
من الان یه مشکلی دارم و اون اینکه ، من این منو رو طوری ازش استفاده کردم که تمام داده هاشو از پایگاه داده میگیره و هیچ مشکلی ندارم ولی به جز در یک مورد و اونم اینکه وقت زیر منویی که دارای زیر منو هست و این زیر منوها خودشون دارای مقدار، تمام داده های این زیر منو رو میریزه به هم !! مثل این عکس...
همونجا که دورشو خط کشیدم. باید چی کار کنم!!!

[battak]

از دوستان دیگه کسی به این تاپیک سر نمیزنه! یا کم لطفی میکنن!!

[binboy]

با سلام
من تونستم منو را راست چین کنم فقط یک مشکل با چندتا درخواست دارم؟
1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟
2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#
3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟
4.جای لینکدار بودن متن منو اگر بشود کادر منو، دارای لینک شود بهتره؟
اینم کد CSS تغییر یافته:

/** Start Menu **/
#menu, #menu ul
{
list-style: none;
background-color: #f7f7eb;
padding: 0 0 26px 0;
margin: 0;
color:#000;
}
#menu li
{
float: right;
margin-left: 3px;
position: relative;
border: 1px solid #ecffec;
}
#menu li:hover{
background: #bd0000;
color:#FFF;
}
#menu ul
{
position: absolute;
top: 25px;
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-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: right;
text-decoration: none;
color:#000;
padding: 5px;
}

#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
top: 2px;
left: -150px;
display: none;
}
#menu ul.submenu li:hover ul
{
display: block;
}

/** End Menu **/لطفا در موارد بالا مرا کمک کنید.
با تشکر

[battak]

با سلام
با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟
میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟


منم با این آیتم ها مشکل دارم، از دوستان کسی نیست که به داد این تاپیک برسه!!! :اشتباه::افسرده::ناراحت:

[binboy]

با سلام
من تونستم منو را راست چین کنم فقط یک مشکل با چندتا درخواست دارم؟
1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟
2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#
3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟
4.جای لینکدار بودن متن منو اگر بشود کادر منو، دارای لینک شود بهتره؟
اینم کد CSS تغییر یافته:

/** Start Menu **/
#menu, #menu ul
{
list-style: none;
background-color: #f7f7eb;
padding: 0 0 26px 0;
margin: 0;
color:#000;
}
#menu li
{
float: right;
margin-left: 3px;
position: relative;
border: 1px solid #ecffec;
}
#menu li:hover{
background: #bd0000;
color:#FFF;
}
#menu ul
{
position: absolute;
top: 25px;
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-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: right;
text-decoration: none;
color:#000;
padding: 5px;
}

#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
top: 2px;
left: -150px;
display: none;
}
#menu ul.submenu li:hover ul
{
display: block;
}

/** End Menu **/لطفا در موارد بالا مرا کمک کنید.
با تشکر

یه پدر آمرزیده ای تو مشکلات بالا راهنمایی کنه؟؟؟؟؟؟؟؟؟؟؟؟

[aminicompeng]

سلام؛
من هر کاری می کنم نمی تونم این استایل رو برای منوی asp.net استفاده کنم. لطفا راهنمائی کنید.

[Mr FTHEL]

با سلام
من تونستم منو را راست چین کنم فقط یک مشکل با چندتا درخواست دارم؟
1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟
2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#
3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟
4.جای لینکدار بودن متن منو اگر بشود کادر منو، دارای لینک شود بهتره؟
اینم کد CSS تغییر یافته:

/** Start Menu **/
#menu, #menu ul
{
list-style: none;
background-color: #f7f7eb;
padding: 0 0 26px 0;
margin: 0;
color:#000;
}
#menu li
{
float: right;
margin-left: 3px;
position: relative;
border: 1px solid #ecffec;
}
#menu li:hover{
background: #bd0000;
color:#FFF;
}
#menu ul
{
position: absolute;
top: 25px;
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-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: right;
text-decoration: none;
color:#000;
padding: 5px;
}

#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
top: 2px;
left: -150px;
display: none;
}
#menu ul.submenu li:hover ul
{
display: block;
}

/** End Menu **/لطفا در موارد بالا مرا کمک کنید.
با تشکر


با سلام
من تونستم منو را راست چین کنم فقط یک مشکل با چندتا درخواست دارم؟
1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟
2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#
3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟
4.جای لینکدار بودن متن منو اگر بشود کادر منو، دارای لینک شود بهتره؟
اینم کد CSS تغییر یافته:

/** Start Menu **/
#menu, #menu ul
{
list-style: none;
background-color: #f7f7eb;
padding: 0 0 26px 0;
margin: 0;
color:#000;
}
#menu li
{
float: right;
margin-left: 3px;
position: relative;
border: 1px solid #ecffec;
}
#menu li:hover{
background: #bd0000;
color:#FFF;
}
#menu ul
{
position: absolute;
top: 25px;
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-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: right;
text-decoration: none;
color:#000;
padding: 5px;
}

#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
top: 2px;
left: -150px;
display: none;
}
#menu ul.submenu li:hover ul
{
display: block;
}

/** End Menu **/لطفا در موارد بالا مرا کمک کنید.
با تشکر


کلا اگر دوست داری واضح بگو میخوای چیکار کنی:لبخند:
1.مگه هنوزم ie 5 و 6 هست ؟:قهقهه: (کسی دیگه استفاده نمیکنه تقریبا)
2.من نفهمیدم چی میگی اما اینو واست نوشتم چک کن
3.پیکان رو میتونی دستی بدی اما اگر واسه سایت باشه اسکریپت مینویسی که راحت باشی
4.مگه نیست؟ نفهمیدم منظورت چیه
و در آخر نیاز به فایل جاوا اسکریپت هست فایل رو ضمیمه کردم البته این به صورت ajax هست :چشمک:
راستی توی بقیه IE ها مشکل نداره؟ :-?

[Mr FTHEL]

سلام؛
من هر کاری می کنم نمی تونم این استایل رو برای منوی ASP.NET استفاده کنم. لطفا راهنمائی کنید.
کدوم؟:افسرده:
به نظرم بری توی تالار asp راحتر بهت جواب میدن:چشمک:

[aminicompeng]

کدوم؟:افسرده:
به نظرم بری توی تالار asp راحتر بهت جواب میدن:چشمک:

فرقی نمی کنه هر استایلی که میزارم. احتمالا بخاطر اینه که از IE6 استفاده می کنم، متاسفانه نمی تونم از ورژن های دیگه ای استفاده کنم.(بخاطر اینکه سیستمی که توی شرکت روش کار می کنیم از 7 ، 8 سال پیش ایجاد شده که با Browser های دیگه و جدید خیلی سازگار نیست)
ممنون از لطفتون

[mahsa.n]

سلام آقا عماد من منوي شما رو گذاشتم تو سايتم ولي زير منوها تو ie6 باز نميشن
من بايد چي كار كنم؟:ناراحت:

[L_eskandary]

سلام دوستان
ممنون بخاطر کار خوبتون ...
یه سوال : اگه بخوام برا هر کدوم از منوهای اصلی ام image جداگانه ای تعریف کنم یعنی یه Backgroundimage‌ جداگانه برا Tools , Front End , ... باید کدوم قسمت رو تغییر بدم ؟

[shahriar_1363]

سلام
ببخشید می بینم که این تاپیک دیگه کسی سر نمی زنه ولی شانسم رو امتحان می کنم :لبخندساده:
من همین منو رو طراحی کردم به جای ul اول عکس گذاشتم
مشکل من این هست که می خوام 3 تا زیر منو داشته باشم ولی وقتی زیر منوی دوم باز می شه زیر منوی 3 هم باز می شه یعنی هر چی تلاش کردم نتونستم زیر منوی سوم خاصیت display:none رو اجرا کنم
اگه ممکن باشه کمکم کنید ممنون می شم:بوس:

[emad_67]

یه سری از سوالات دوستان رو تو این پست جواب میدم:


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 دانلود کنید.

[arashkey]

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

فقط مشکلی که دارم اینه که من می خوام منو ها سریع باز نشن بلکه مثلا یک ثانیه تا باز شدن طول بکشن و همچنین بسته شدن هم چند ثانیه طول بکشه
با جاوااسکریپت نباشه بهتره چون بعضی ها جاوااسکریپت رو خاموش می کنن یا توسط IE بعضی از کدهاش بلاک می شه
گفتند با Expression تو Css میشه اینکارو کرد
فقط سر نخ می خوام

[alismith]

سلام

من پیشنهاد می کنم برای ایجاد duration از jquery استفاده کنید ولی چون خودتون می گید با جاوااسکریپت نباشه می تونید از css3 و خاصیت transition-duration استفاده کنید
اما در بیشتر مواقع مخصوصا در IE که خودتون اشاره کردید jQuery مطمئن تر هستش


موفق باشید

[amir2105]

سلام چطور زیر منوهام رو از راست به چپ باز کنم

[css-man]

توی این منو شما یکبار id تعریف کردی برای ul و بهش سبک دادی

بعد اومدی نوشتی #menu, #menu ul این یعنی چی چرا دوبار نام id , نوشتی؟

چند بار به ul سبک دادی
از کجا مشخص میشه چی ماله کدومه
؟

[nineteen]

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


<!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;
}

[vB.N3T]

ممنون از اموزش
میشه توضیح بدید من یه جا مشکل دارم هر اموزشی که میبینم به این شکل سی اس اس مینویسن و یه کمی گمراه شدم

مثلا این 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

[vahide amp]

این کد #menu ul برای قسمت منو ulهست. این کد menu ul li برای li ی که درون ul هست. یا این کد menu a:link, menu a:visited برای عمل لینک a و زمانی که لینک a مشاهده میشه هست.

[vB.N3T]

hover یعنی چی؟؟؟a:visited چیه؟؟
این 2 قسمتی ها چطوری کار میکنن
#menu ul a:link, #menu ul a:visited

[mohammad kafiyan]

103204
کلاسهای کاذب هستند که برای نمایش رویدادهای پویا مورد استفاده قرار می گیرند مثل تغییر وضعیت یک کنترل

[vahide amp]

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