# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > مقاله: ساخت منو های 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 هم استفاده کنین و این کد رو در هر ردیف و یا ستونی قرار بدین. اینطوری وسط سهل هستش، هر طرف که بخوایین منوتون تغیر مکان میده.

----------


## 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").getElementsByTagNa  me("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>
> ...


ممنون دوست عزیز.از کد شما استفاده کردم.به جای " " در 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/sh....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/sh....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
> ...


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

----------


## aminicompeng

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

----------


## Mr FTHEL

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





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



کلا اگر دوست داری واضح بگو میخوای چیکار کنی :لبخند گشاده!: 
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>که در نهایت به این شکل میشه:

01.jpg




> من هر کاری می کنم نمی تونم این استایل رو برای منوی 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

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

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

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

----------


## vahide amp

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

----------

