-
1 ضمیمه
ساخت منو های drop down با استفاده از CSS
سلام دوستان
مدتی پیش یه مقاله در مورد ساخت منو های drop down نوشتم که مسئولین مجله لطف کردن و اونو در مجله درج نمودند. این مقاله رو تصمیم گرفتم در این بخش برای سایر کاربران هم قرار بدم:
منو ها یکی از مواردی هستند که امروزه در بسیاری از سایت ها مورد استفاده قرار می گیرند و علاوه بر زیبایی، انسجام خاصی نیر به بخش های مختلف یک سایت می دهند. در این آموزش قصد دارم نحوه ساخت منو های drop down یا پایین افتادنی را تنها با استفاده از CSS و بدون جاوا اسکریپت آموزش دهم.
http://www.irpcn.com/images/article_...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_...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_...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 می شناسد، این جلوه در این مرورگر کار نخواهد کرد. البته در انتها از یک فایل ضمیمه برای اصلاح این مورد در اینترنت اکسپلورر استفاده خواهیم کرد.
با افزودن کد های این مرحله کار سبک دهی به منو پایان میابد و طرح ما به شکل زیر خواهد بود:
حال باید کاری کنیم که تنها در زمان قرار گرفتن موس بر روی منو، زیر منوی آن ظاهر شود.
به این منظور خاصیت 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 ضمیمه شده به صورت درونی از جاوا اسکریپت برای شناسایی کلاس های کاذب استفاده می کند بنابراین در صورت غیر فعال بودن جاوا اسکریپت بر روی اینترنت اکسپلورر باز هم مشکل عدم نمایش زیر منو ها به وجود می آید.
موفق باشید
-----------------
ویرایش: برای اضافه کردن زیر منو تا هر سطح دلخواه و همینطور اضافه کردن یک فلِش برای منوهایی که زیر منو دارن به این پست رجوع کنید:
https://barnamenevis.org/showthread.p...=1#post1212515
-
نقل قول: ساخت منو های drop down با استفاده از CSS
با سلام
اگر بخواهیم منوی عمودی درست کنیم ، چه باید بکنیم؟
منویی که با کوچک و بزرگ شدن صفحه جایش در صفحه عوض نشود
متشکرم
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
اگر بخواهیم منوی عمودی درست کنیم ، چه باید بکنیم؟
برای اینکار دیگه شما باید خصیصه float: left رو از li های مربوط به نوار منو حذف کنید. بعد هم یه مقدار موقعیت دهی عناصر باید تغییر کنه.
نقل قول:
منویی که با کوچک و بزرگ شدن صفحه جایش در صفحه عوض نشود
این مورد به خود منو بستگی نداره. شما باید اونو در صفحه درست موقعیت دهی کنید.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام
مرسی بابت این مقاله
میشه بگید از css ها چطور باید استفاده کرد؟آخه من تازه کارم:خجالت:
باید تو یه فایل جدا بنویسم یا تو تگ هد؟ و چه جوری رو ul , il ها اعمال کنم؟
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
سلام
مرسی بابت این مقاله
میشه بگید از css ها چطور باید استفاده کرد؟آخه من تازه کارم:خجالت:
باید تو یه فایل جدا بنویسم یا تو تگ هد؟ و چه جوری رو ul , il ها اعمال کنم؟
شما هم می تونی توی فایل خارجی بنویسی و اونو ضمیمه کنی به فایل html و هم داخل تگ head در درون تگ style:
<style type="text/css">
</style>
نمونه کد رو دانلود کنید متوجه میشید به چه شکله.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
کدوم راه بهتره؟
من واسه پایان نامه ام دارم سایت میسازم ،امنیت و دقیق عمل کردن کدهام واسم مهمه
موقعی که از فایل خارجی استفاده کنم کجای کدهای html بایدکد مربوط به ضمیمه رو وارد کنم ؟
ممنون میشم جواب بدین
-
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام
برای جمع و جور بودن سایت بهتره یک فایل با پسوند css بسازی و کلاسها رو در اون درج کنی
اینم برای لینک دادنش:
<link href="Style.css" rev="stylesheet" rel="stylesheet" type="text/css" />
که در مثال بالا فایل style.css باید در محل فایل اصلیت باشه(آدرس دهی نسبی)و در تگ head باید بنویسیش
-
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام دوسستان
خسته نباشید
1.من با کمی تغییر در کدهای این تاپیک یک منو drop down ساختم اما میخوام وقتی موس روی زیر منو میره و زیر منوی این زیر منو نمایش داده میشه کمی از لبه های زیر منوی زیر منو روی زیر منو قرار بگیره ،چه جوری میشه این کار رو انجام داد؟
کد خاصی باید در css اضافه کنم؟
2. من میخوام منوم توی یه جدول تک سلولی پخش بشه ،یعنی اگر جدول من طولش 900 باشه با ارتفاع 20 منو طوری چیده شده باشه که کل 900px رو بگیره،اگه راهنمایی کنید ممنون میشم
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
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 به صورت درصدی تعیین کنید.
-
1 ضمیمه
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
azade.kazemi33
سلام دوسستان
خسته نباشید
1.من با کمی تغییر در کدهای این تاپیک یک منو drop down ساختم اما میخوام وقتی موس روی زیر منو میره و زیر منوی این زیر منو نمایش داده میشه کمی از لبه های زیر منوی زیر منو روی زیر منو قرار بگیره ،چه جوری میشه این کار رو انجام داد؟
کد خاصی باید در css اضافه کنم؟
مرسی
من برای این مشکل که مطرح کردم اینکارا رو انحام دادم و درست عمل میکنه
#menu ul
{
width: 151px;
{
#menu ul.submenu ul
{
right: 150px;
}
البته من منوی از سمت راست میخواستم نه چپ ولی یه چیزی پیش اومده این فایلا رو ببنید.وفتی منوی من فارسی است نمیشه رفت رو زیر منوی آخر .و اینکه وقتی روی منوی اصلی میرمجای بقیه تغییر میکنه
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
وفتی منوی من فارسی است نمیشه رفت رو زیر منوی آخر .و اینکه وقتی روی منوی اصلی میرمجای بقیه تغییر میکنه
در مورد زیر منوی آخر من که مشکلی ندیدم. کجا منظورتونه؟
اون تغییر مکان کوچکی که به وجود میاد به خاطر اینه که 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>
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
emad_67
در مورد زیر منوی آخر من که مشکلی ندیدم. کجا منظورتونه؟
وقتی میری روی زیر منو بعد میخوایی بری روی زیر منوی اون،نمیشه با موس رفت روی زیر منوی اخر.وفتی روی نوشته زیر منو هستی تا از روی اون نوشته رد میشی.زیر منوی آخر میپره.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
وقتی میری روی زیر منو بعد میخوایی بری روی زیر منوی اون،نمیشه با موس رفت روی زیر منوی اخر.وفتی روی نوشته زیر منو هستی تا از روی اون نوشته رد میشی.زیر منوی آخر میپره.
ظاهرا این مورد یه باگ تو ie هست که تنها موقعی که متن فارسی وارد بشه این حالت پیش میاد.
برای حلش فعلا تنها راهی که به نظرم میرسه اینه که تگ های a رو از بین li ها حذف کنید و فقط li ها باقی بمونن. مثلا به این شکل:
<li>اعتراض به نمرات</li>
بعد می تونید با اندکی تغییر استایل های li همون شکل قبلی رو ایجاد کنید.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
با سلام
چرا وقتی روی منو میرم رنگ زمینه جدول صفحه ام یک دست میشه؟در صورتی که من براش استایل تعریف کردم که
style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
azade.kazemi33
با سلام
چرا وقتی روی منو میرم رنگ زمینه جدول صفحه ام یک دست میشه؟در صورتی که من براش استایل تعریف کردم که
style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >
filter تنها برای ie شناخته شده هست، سایر مرورگر ها اصلا اونو نمیشناسن. برای ایجاد gradient بهتره از تصاویر استفاده کنید.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
emad_67
ظاهرا این مورد یه باگ تو 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>
وقتی روی منو میرم تو جدولم تکون میخورن.یعنی بقیه یه کم جابجا میشن.فکر کنم این مشکلو قبلا هم عنوان کردم:خجالت:،نمیدونم شایدم نه.باید چیکار کنم تا این مشکل حل بشه؟
؟
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
وقتی تگ ش رو برمیدارم تفییری پیش میاد و نمیتونم به شکل بقیه liها درش بیارم.ارتفاعش کمتر میشه نسبت به بقیه.
همونطور که گفتم باید در خصوصیات li ها تغییر ایجاد کنید. ارتفاع و هرچیزی رو که می خواید در خصوصیات li تعیین کنید(در حال حاضر این پارامتر ها در خصوصیات تگ a تعیین شده).
نقل قول:
وقتی روی منو میرم تو جدولم تکون میخورن.یعنی بقیه یه کم جابجا میشن.فکر کنم این مشکلو قبلا هم عنوان کردم:خجالت:،نمیدونم شایدم نه.باید چیکار کنم تا این مشکل حل بشه؟
اولین پست همین صفحه رو بخونید(پست 11)
-
نقل قول: ساخت منو های drop down با استفاده از CSS
بازم ممنون
آره دیدم همون موقع بسکه اشکال دارم نمیدونم چی پرسیدم:قهقهه::خجالت:
مشکل دومم حل شد فقط راهی نیست که واسه بوردر بشه از یه رنگ به رنگ دیگه ای رسید؟مثل
این کد گه واسه زمینه قرار دادم
style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >
مشکل یه دست شدن رنگ زمینه هم حل شد.... البته اگه باز...:چشمک:
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
azade.kazemi33
بازم ممنون
فقط راهی نیست که واسه بوردر بشه از یه رنگ به رنگ دیگه ای رسید؟مثل
این کد گه واسه زمینه قرار دادم
style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradien tType='0',startColorStr='#6BB0DD',endColorStr='#ff ffff'); FONT-FAMILY: Tahoma" >
برای حالت هایی که میخواین gradient داشته باشین، حالا برای رنگ زمینه، border یا موارد دیگه بهتره از تصاویر استفاده کنید و اونو در زمینه تگ مورد نظر قرار بدید.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
با سلام .
من می خوام وقتی موس رو سطر های Gridview میره ،رنگ زمینه اون سطر تغییر کنه.
چه طور این کارو تو Css انجام بدیم؟
ممنون
-
نقل قول: ساخت منو های drop down با استفاده از CSS
باید به div یک کلاسبدی بعد با جاوااسکریپت با موس آور شدن کلاس رو تغییر بدی :
< div class="tnews" onmouseover="javascript:this.className='tnews2';" onmouseout="javascript:this.className='tnews';">
خودت تعمیمش بده ...
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
nadia2174
با سلام .
من می خوام وقتی موس رو سطر های Gridview میره ،رنگ زمینه اون سطر تغییر کنه.
چه طور این کارو تو Css انجام بدیم؟
ممنون
لطفا موضوع رو در تاپیک جدیدی مطرح کن.
نقل قول:
نوشته شده توسط
man4toman
باید به div یک کلاسبدی بعد با جاوااسکریپت با موس آور شدن کلاس رو تغییر بدی :
< div class="tnews" onmouseover="javascript:this.className='tnews2';" onmouseout="javascript:this.className='tnews';">
خودت تعمیمش بده ...
gridview تگ table تولید می کنه، باید tr رو استایل دهی کرد.
-
1 ضمیمه
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام
من يك منو عمودي با روش آقا عماد نوشتم
تو IE 7 تست كردم مشكلي نداشت اما با موزيلا يا همون Firefox 3.5.1 باز مي كنم زير منو ها نمايش داده نمي شه
دوستان مي تونند بگن مشل از چيه ؟ ( فايل صفحه منو پيوست كردم)
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
تو IE 7 تست كردم مشكلي نداشت اما با موزيلا يا همون Firefox 3.5.1 باز مي كنم زير منو ها نمايش داده نمي شه
شما توی کلاس Menu_M خصوصیت overflow: hidden قرار دادی، به همین دلیل فقط گوشه ای از زیر منو ها نشون داده میشه. در کل این خصوصیت رو حذف کنید مشکل حل میشه.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
emad_67
شما توی کلاس Menu_M خصوصیت overflow: hidden قرار دادی،
ممنون درست شد مشكل سر همون بود
يك سوال ديگه من IE 6 ندارم، آيا اين روش پيداسازي منو در IE 6 هم همين رفتار رو داره و بدون مشكل اجرا مي شه يا ممكن خطا اي هم داشته باشه
باز هم ممنون
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
يك سوال ديگه من IE 6 ندارم، آيا اين روش پيداسازي منو در IE 6 هم همين رفتار رو داره و بدون مشكل اجرا مي شه يا ممكن خطا اي هم داشته باشه
بله با ie6 هم کار می کنه، منوی شما رو هم تست کردم، مشکلی نداشت.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
emad_67
بله با ie6 هم کار می کنه، منوی شما رو هم تست کردم، مشکلی نداشت.
من با IE 5 و FF 2.1 امتحان كردم فاصله زيرمنوها زياد مي شه و دورتر از فاصله معمولي قرار مي گيره و از دسترس خارج مي شه و نمي شه روش رفت
چطوري مي تونم شرط بزارم اگر IE5 و FF 2.1 بود فاصله كمتر بشه ؟( البته IE 5 مهم نيست چون خيلي كم استفاده مي شه اما موزيلا چرا)
-
نقل قول: ساخت منو های drop down با استفاده از CSS
برای ie میشه از conditional comment ها استفاده کرد. به این شکل:
<!--[if IE 5.5]>
<style type="text/css">
....
</style>
<![endif]-->
اما این مورد فقط برای ie کار می کنه. برای فایرفاکس باید از جاوا اسکریپت استفاده کنی و استایل مربوطه رو تغییر بدی. در مورد firefox فکر نمی کنم زیاد مشکلی باشه چون معمولا افرادی که از فایرفاکس استفاده می کنن مروگرشون رو آپدیت می کنن به ورژن های جدید.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
من تا حالا از اين دستورات شرطي استفاده نكردم (راستش نتونستم)
و فايل css خارجي مي شه بگيد چطوري استفاده كنم همون قسمت مربوطه رو واسم بزاريد يا يك مثال
(شرمنده.......)
-
نقل قول: ساخت منو های drop down با استفاده از CSS
شما کلا باید تگ هایی که می خوای در وزژن خاصی از 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]-->
موفق باشید
-
نقل قول: ساخت منو های drop down با استفاده از CSS
خیلی مملون راستیتش من منوی عمودی رو ساختم ولی استادم گیر داده بود که باید منوی وب سایتم افقی باشه نه عمودی
مطالبت واقعا به دردم خورد خیلی مملون
-
نقل قول: ساخت منو های drop down با استفاده از CSS
باسلام به اساتید
این منو رو میشه از دیتابیس پر کرد؟
ممنون
-
نقل قول: ساخت منو های drop down با استفاده از CSS
باسلام
یه مشکل: زیر منوها زیر بقیه عناصر صفحه قرار می گیرند.راهی داره درست شه؟
ممنون
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
این منو رو میشه از دیتابیس پر کرد؟
بله مشکلی نداره، بستگی به زبان سمت سروری که باهاش کار میکنی داره که چه جوری اینکار رو کنی.
نقل قول:
یه مشکل: زیر منوها زیر بقیه عناصر صفحه قرار می گیرند.راهی داره درست شه؟
با در نظر گرفتن z-index برای زیر منو ها می تونی مشکل رو حل کنی.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
آقا عماد سلام
میشه دقیقا بگید این z-index رو کجا باید بنویسم.هر کاری کردم نشد.
مقدارش چند باید باشه؟
از شما ممنونم.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
منم این مشکل رو دارو و اینکه همون خطایی که گفتین ممکنه در نمایش زیر منو وجود داشته باشه!!
پنهان میشه ولی دیگه رویت نمیشه!
-
نقل قول: ساخت منو های drop down با استفاده از CSS
با سلام
یه سوال دیگه: میشه منو را در وسط صفحه قرار داد؟
با تشکر
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
میشه دقیقا بگید این z-index رو کجا باید بنویسم.هر کاری کردم نشد.
باید z-index رو برای menu# ul در نظر بگیری. مثلا z-index این تگ ul رو بزار 2، و z-index اون قسمتی که می خوای بیفته زیر منو ها بزار 1.
نقل قول:
منم این مشکل رو دارو و اینکه همون خطایی که گفتین ممکنه در نمایش زیر منو وجود داشته باشه!!
پنهان میشه ولی دیگه رویت نمیشه!
احتمالا یه جایی رو اشتباه می کنی، فایل ضمیمه رو دانلود کن و کارت رو با اون مقایسه کن.
نقل قول:
یه سوال دیگه: میشه منو را در وسط صفحه قرار داد؟
کلشو بزار توی یه div و اون div رو وسط قرار بده.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
سلام آقا عماد
در مورد نمایش زیر منوها مشکل حل شد.
ولی در مورد نمایش در وسط صفحه مشکل باقیه.یعنی منو فقط در سمت راست یا چپ قرار میگیره.
با تشکر از پاسخهات.
-
نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط
atbin2010
سلام آقا عماد
در مورد نمایش زیر منوها مشکل حل شد.
ولی در مورد نمایش در وسط صفحه مشکل باقیه.یعنی منو فقط در سمت راست یا چپ قرار میگیره.
با تشکر از پاسخهات.
شما میتونین از جدول Html هم استفاده کنین و این کد رو در هر ردیف و یا ستونی قرار بدین. اینطوری وسط سهل هستش، هر طرف که بخوایین منوتون تغیر مکان میده.