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

[emad_67]

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

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

در ساخت این منو ها از لیست های نا مرتب(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 استفاده می کنیم و سایر مقادیر آن را برابر صفر قرار می دهیم.
منو های ما تا این لحظه به صورت زیر است:

تا اینجا تقریبا فرم کلی منو شکل گرفته است. برای اضافه کردن زیر منو ها یا در واقع قسمت پایین افتادنی منو از یک بر چسب 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 قرار دهیم تا از این حالت جلوگیری شود.
در نهایت با نسبت دادن سبک های بالا طرح ما به شکل زیر در خواهد آمد:

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

#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

[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 هم استفاده کنین و این کد رو در هر ردیف و یا ستونی قرار بدین. اینطوری وسط سهل هستش، هر طرف که بخوایین منوتون تغیر مکان میده.