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

Printable View

دوشنبه 11 مرداد 1389, 23:21 عصر
emad_67

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

نقل قول:

قرار دادم ولی منو و زیر منوهام راست به چپ باز نمیشن

خوب قرار نیست rtl بشن، که. شما متون داخل هر تگ a رو right align کن. border سمت چپ رو هم به سمت راست ببر.
دوشنبه 11 مرداد 1389, 23:27 عصر
mahsa.n

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

نقل قول:

نوشته شده توسط emad_67

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

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

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

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



 



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..................*/

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

نقل قول:

نوشته شده توسط 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>

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

سه شنبه 12 مرداد 1389, 11:05 صبح
emad_67

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

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

نقل قول:

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

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

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





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

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

سه شنبه 12 مرداد 1389, 14:56 عصر
emad_67

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

نقل قول:

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

این موردی که می خوای مستلزم تغییر ساختار منو هست، چون با این ساختار فعلی و کاری که شما می خوای بکنی مشکل ایجاد می کنه، یعنی تنها می تونید بیرونی ترین منو رو باز بسته کنید.
چهارشنبه 20 مرداد 1389, 07:14 صبح
sm_mgh

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

سلام

ممنون از کدی که گذاشته اید اما من دقیقا از نمونه کد گذاشته شده همراه با فایل مربوطه استفاده کردم ولی زیر منو را نمی توانم ببینم ممنون می شم اگه راهنمایی ام کنید.
چهارشنبه 20 مرداد 1389, 07:34 صبح
sm_mgh

1 ضمیمه

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

من کد را هم براتون فرستادم
چهارشنبه 20 مرداد 1389, 09:41 صبح
emad_67

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

نوشته شده توسط sm_mgh

سلام

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

قسمت 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> 
```
شنبه 23 مرداد 1389, 12:39 عصر
alihooman

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

سلام
1.من چون میخام منو فارسی باشی، راست چین اش کردم. ولی زیر منوها رو نتونستم راست چین کنم.چی کار کنم؟
2.مربع خاکستری که کنار گزینه های زیرمنو هست، توسط کدوم کد درست میشه؟ چون میخام اونم راست چین باشه.
ممنون میشم اگه راهنماییم کنین.
یک شنبه 07 شهریور 1389, 10:53 صبح
sahel65

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

آقا عماد از کارتون لذت بردم، میشه بگید شما چه مدت روی طراحی و کار با css زمان گذاشتید؟
آیا مطالعه هم داشتید و یا از راه تمرین و ممارست توانایی های خودتون رو بالا بردید؟
با تشکر
یک شنبه 07 شهریور 1389, 12:04 عصر
emad_67

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

نقل قول:

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

ممنون، لطف داری
برای شروع من کتاب "101 نکته و ترفند برای استفاده از css در طراحی وب" رو خوندم. کتاب خیلی خوبی هست و تا حد زیادی دستم رو راه انداخت. بعد هم که خوندن مقالات (بیشتر عملی) از اینترنت و تمرین بود که باعث شد یه مقدار مسلط تر بشم.
موفق باشید
یک شنبه 07 شهریور 1389, 12:29 عصر
jafar1374

نقل قول: ساخت منو های drop down با استفاده از CSS
سلام
آیا میشه این راه رو برای سایت آگهی هم استفاده کرد؟
مثلا: برای اینها
املاک - صنعت و غیره
و کاری کرد که زیر منوهای اینا هم به اون شکل بیان:قلب:
--------------------
اینم کدش هست
```
<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}
```
یک شنبه 07 شهریور 1389, 12:52 عصر
sahel65

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

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;
}
یک شنبه 07 شهریور 1389, 18:51 عصر
emad_67

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

نقل قول:

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

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

نقل قول:

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

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

بله درسته، دیگه بسته به نیازتون می تونید هر تغییری که بخواید بدید.
دوشنبه 08 شهریور 1389, 09:32 صبح
davood59

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

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

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

آقا به داد من برسیم
من می خوام منوی بخشهای سایت اگهیم رو 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>

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

دوشنبه 19 مهر 1389, 15:16 عصر
Khalil morradi

1 ضمیمه

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

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

لطفا کمکم کنید
یک شنبه 16 آبان 1389, 08:59 صبح
battak

1 ضمیمه

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

آقا عماد این چندمین بار هست که من به این تاپیکتون میام و ازش استفاده میکنم. دستتون درد نکنه.
من الان یه مشکلی دارم و اون اینکه ، من این منو رو طوری ازش استفاده کردم که تمام داده هاشو از پایگاه داده میگیره و هیچ مشکلی ندارم ولی به جز در یک مورد و اونم اینکه وقت زیر منویی که دارای زیر منو هست و این زیر منوها خودشون دارای مقدار، تمام داده های این زیر منو رو میریزه به هم !! مثل این عکس...
همونجا که دورشو خط کشیدم. باید چی کار کنم!!!
دوشنبه 17 آبان 1389, 08:12 صبح
battak

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

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

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

با سلام
من تونستم منو را راست چین کنم فقط یک مشکل با چندتا درخواست دارم؟
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 **/
لطفا در موارد بالا مرا کمک کنید.
با تشکر

چهارشنبه 19 آبان 1389, 11:57 صبح
battak

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

نقل قول:

نوشته شده توسط binboy

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

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

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

نقل قول:
نوشته شده توسط 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 **/
لطفا در موارد بالا مرا کمک کنید.
با تشکر
یه پدر آمرزیده ای تو مشکلات بالا راهنمایی کنه؟؟؟؟؟؟؟؟؟؟؟؟

دوشنبه 01 آذر 1389, 15:07 عصر
aminicompeng

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

سلام؛
من هر کاری می کنم نمی تونم این استایل رو برای منوی asp.net استفاده کنم. لطفا راهنمائی کنید.
دوشنبه 01 آذر 1389, 23:56 عصر
Mr FTHEL

1 ضمیمه

نقل قول: ساخت منو های drop down با استفاده از CSS
نقل قول:
نوشته شده توسط 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 **/
لطفا در موارد بالا مرا کمک کنید.
با تشکر
نقل قول:
نوشته شده توسط 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 **/
لطفا در موارد بالا مرا کمک کنید.
با تشکر
کلا اگر دوست داری واضح بگو میخوای چیکار کنی:لبخند:
1.مگه هنوزم ie 5 و 6 هست ؟:قهقهه: (کسی دیگه استفاده نمیکنه تقریبا)
2.من نفهمیدم چی میگی اما اینو واست نوشتم چک کن
3.پیکان رو میتونی دستی بدی اما اگر واسه سایت باشه اسکریپت مینویسی که راحت باشی
4.مگه نیست؟ نفهمیدم منظورت چیه
و در آخر نیاز به فایل جاوا اسکریپت هست فایل رو ضمیمه کردم البته این به صورت ajax هست :چشمک:
راستی توی بقیه IE ها مشکل نداره؟ :-?
دوشنبه 01 آذر 1389, 23:57 عصر
Mr FTHEL

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

نقل قول:

نوشته شده توسط aminicompeng

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

کدوم؟:افسرده:
به نظرم بری توی تالار asp راحتر بهت جواب میدن:چشمک:
سه شنبه 02 آذر 1389, 09:08 صبح
aminicompeng

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

نقل قول:

نوشته شده توسط Mr FTHEL

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

فرقی نمی کنه هر استایلی که میزارم. احتمالا بخاطر اینه که از IE6 استفاده می کنم، متاسفانه نمی تونم از ورژن های دیگه ای استفاده کنم.(بخاطر اینکه سیستمی که توی شرکت روش کار می کنیم از 7 ، 8 سال پیش ایجاد شده که با Browser های دیگه و جدید خیلی سازگار نیست)
ممنون از لطفتون
چهارشنبه 10 آذر 1389, 12:55 عصر
mahsa.n

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

سلام آقا عماد من منوي شما رو گذاشتم تو سايتم ولي زير منوها تو ie6 باز نميشن
من بايد چي كار كنم؟:ناراحت:
چهارشنبه 15 دی 1389, 22:03 عصر
L_eskandary

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

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

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

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

2 ضمیمه

نقل قول: ساخت منو های drop down با استفاده از CSS
یه سری از سوالات دوستان رو تو این پست جواب میدم:

نقل قول:

1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟

نقل قول:

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

فکر نمی کنم که کار کنه به خاطر وجود کلاس های کاذب hover. من خیلی وقته نه با ie6 و نه 7 دیگه کار نمی کنم، مبنای کارم ie 8 به بالاست.

نقل قول:

2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#

متن داخل تگ a قرار داره بنابراین باید برای a:hover استایل رو بنویسی:
```
#menu a:hover

{

    color: blue;

}
```
نقل قول:

3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟

یک کلاس جدا مثلا به اسم arrow تعریف کنید و اونو به منو هایی که زیر منو دارن نسبت بدید. به این شکل:
```
.arrow

{

    background: url('arrow.png') no-repeat top right;

}
```
و هنگام نسبت دادم به زیر منو:
```
<li><a href="#" class="arrow">C#‎</a>

                        <ul>

                            <li><a href="#">Collections</a></li>

                            <li><a href="#">Arrays</a></li>

                        </ul>

                    </li>
```
که در نهایت به این شکل میشه:

ضمیمه 66262

نقل قول:

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

منو های asp.net تک table تولید می کنن که این استایل ها با اون سازگار نیست، چون اینجا مبنای کار ul -li بوده.

نقل قول:

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

برای حل این مشکل میشه از child combinator استفاده کرد که در ادامه توضیح میدم:
دو گزینشگر زیر رو در نظر بگیرید:
```
ul li { padding: 5px; }

ul > li { padding: 5px; }
```
در حالت اول که اصطلاحا بهش descendant selector گفته میشه، تمام li هایی که داخل تگ ul قرار دارن تحت تاثیر قرار میگیرن، حالا در هر عمقی که می خوان باشن. مثل:
```
<ul>

        <li>test1</li>

        <ol>

            <li>test2</li>

        </ol>

    </ul>
```
که در واقع تگ li ی داخل ol هم انتخاب میشه.
در مواقعی مثل الان ممکنه نیاز داشته باشیم تا فقط تگ هایی رو تحت تاثیر قرار بدیم که در سطح اول قرار دارن، یعنی تگ li ی test1. تو همچین مواردی باید از combinator selector استفاده بشه. combinator همون علامت < هست که بهش گزینشگر فرزندی هم گفته میشه. در واقع زمانی که از < برای انتخاب که عنصر داخلی استفاده می کنیم، تنها عناصری انتخاب میشن که در سطح اول قرار داشته باشن، نه سطوح داخلی تر. یعنی توی این مثال ما فقط تگ li ی test1 انتخاب میشه.
------------
حالا توی منو ها می تونید تا هر سطحی که لازم دارید زیر منو تعریف کنید. فقط این قسمت از کد های css رو باید تغییر بدید:
```
#menu ul.submenu li:hover ul

{

    display: block;

}
```
تغییر بدید به:
```
#menu ul.submenu li:hover > ul

{

    display: block;

}
```
در تصویر بالا می بینید که یه زیر منو برای C#‎ هم اضافه کردم.
فایل ضمیمه رو برای این قسمت و همینطور قرار دادن arrow دانلود کنید.
دوشنبه 23 خرداد 1390, 10:46 صبح
arashkey

1 ضمیمه

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

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

فقط مشکلی که دارم اینه که من می خوام منو ها سریع باز نشن بلکه مثلا یک ثانیه تا باز شدن طول بکشن و همچنین بسته شدن هم چند ثانیه طول بکشه
با جاوااسکریپت نباشه بهتره چون بعضی ها جاوااسکریپت رو خاموش می کنن یا توسط IE بعضی از کدهاش بلاک می شه
گفتند با Expression تو Css میشه اینکارو کرد
فقط سر نخ می خوام
دوشنبه 23 خرداد 1390, 12:56 عصر
alismith

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

سلام

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

موفق باشید
جمعه 02 دی 1390, 16:30 عصر
amir2105

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

سلام چطور زیر منوهام رو از راست به چپ باز کنم
دوشنبه 08 اسفند 1390, 15:37 عصر
css-man

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <link rel="stylesheet" type="text/css" href="style/general.css" />

<title>Content Managment System</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<ul id="menu">

   <li><a href='#'><span>سایت</span></a>

    <ul class="submenu">

     <li><a href='#'><span>کنترل پنل</span></a></li>

     <li><a href='#'><span>تنظیمات کلی</span></a></li>

     <li><a href='#'><span>خروج</span></a></li>

    </ul>

    </li>

   <li><a href='#'><span>کاربران</span></a>

      <ul class="submenu">

         <li><a href='#'><span>مدیریت کاربران</span></a>

          <ul>

           <li><a href='#'><span>ایجاد کاربر جدید</span></a></li>

          </ul>

         </li>

         <li><a href='#'><span>ارسال ایمیل گروهی</span></a></li>

      </ul>

   </li>

   <li><a href='#'><span>منوها</span></a>

   <ul class="submenu">

     <li><a href='#'><span>مدیریت منوها</span></a></li>

     <li><a href='#'><span>منوی کاربری</span></a></li>

     <li><a href='#'><span>منوی اصلی</span></a></li>

    </ul>

   </li>

   <li><a href='#'><span>محتوا</span></a>

   <ul class="submenu">

    <li><a href='#'><span>مدیریت مطالب</span></a></li>

   </ul>

   </li>

   <li><a href='#'><span>راهنما</span></a>

   <ul class="submenu">

     <li><a href='#'><span>راهنمای سیستم مدیریت</span></a></li>

     <li><a href='#'><span>سایت پشتیبانی</span></a></li>

    </ul>

   </li>

</ul>

</body>

</html>

*{

    margin:0;

    padding:0

}

body {

    font: 12px Arial, Tahoma, Verdana;

    background: #FFF url(../image/bg.gif) repeat-x;

    direction:rtl;

}



#menu, #menu ul {

    width:100%;

    background:#d7d4cf;

    padding:1px 0;

    margin:39px 0;

    list-style:none;

    width:100%;

    height:21px;

    border-top:1px solid #FFFFFF;

    border-bottom:1px solid #FFFFFF;

    font:normal 8pt verdana, arial, helvetica;

}

#menu li

{

    float: right;

    position: relative;

    border: 1px solid #d7d4cf;

    background-repeat: no-repeat;

    background-position: right;

}

#menu ul

{

    position: absolute;

    top: -20px;

    right: -1px;

    width: 150px;

    padding: 0;

    display: none;

}

#menu ul li

{

    float: none;

    margin: 0;

    padding: 0;

    line-height: 15px;

}

#menu a:link, #menu a:visited

{

    display: block;

    font-size: 0.75em;

    text-align: right;

    text-decoration: none;

    background:#d7d4cf;

    color:#000;

    width:148px;

    height:13px;

    padding: 4px 0;

}

#menu li:hover

{

    padding:4px 0;

    display:block;

    text-align:center;

    text-decoration:none;

    background:#d7d4cf;

    color:#000;

    width:146px;

    height:13px;

    border-left:1px solid #878480;

    border-right:1px solid #878480;

}

#menu li:hover ul.submenu

{

    display: block;

}

#menu ul.submenu ul

{



    right: 150px;

    display: none;

}

#menu ul.submenu li:hover > ul

{

    display: block;

}

#menu ul a:link, #menu ul a:visited

{

    padding-right: 25px;

}

دوشنبه 02 اردیبهشت 1392, 03:03 صبح
vB.N3T

نقل قول: ساخت منو های drop down با استفاده از CSS
ممنون از اموزش
میشه توضیح بدید من یه جا مشکل دارم هر اموزشی که میبینم به این شکل سی اس اس مینویسن و یه کمی گمراه شدم

مثلا این css برای تگ ul هست
```
#menu ul

{

	position: absolute; 

	top: 25px;

	left: -1px;

	width: 150px;

	padding: 0;

	display: none;

}
```
این کد
```
#menu ul li

{

	float: none;

	margin: 0;

	padding: 0;

	line-height: 15px;

}
```
چرا یه این شکا هست #menu ul li؟؟؟

یا این
```
#menu a:link, #menu a:visited
```
چرا دو بخشی هست؟؟ من تو مکانزیم این روش مشکل دارم ممنون میشم توضیح دهید

مثلا اینا چی میگن...قسمت اولش برای چی هست ؟ دومش برای چی؟
```
#menu li:hover
```
```
#menu li:hover ul.submenu
```
```
#menu ul.submenu li:hover ul
```
```
#menu ul a:link, #menu ul a:visited
```
دوشنبه 02 اردیبهشت 1392, 08:51 صبح
vahide amp

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

این کد #menu ul برای قسمت منو ulهست. این کد menu ul li برای li ی که درون ul هست. یا این کد menu a:link, menu a:visited برای عمل لینک a و زمانی که لینک a مشاهده میشه هست.
دوشنبه 02 اردیبهشت 1392, 16:01 عصر
vB.N3T

نقل قول: ساخت منو های drop down با استفاده از CSS
hover یعنی چی؟؟؟a:visited چیه؟؟
این 2 قسمتی ها چطوری کار میکنن
```
#menu ul a:link, #menu ul a:visited
```
دوشنبه 02 اردیبهشت 1392, 21:18 عصر
mohammad kafiyan

1 ضمیمه

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

ضمیمه 103204
کلاسهای کاذب هستند که برای نمایش رویدادهای پویا مورد استفاده قرار می گیرند مثل تغییر وضعیت یک کنترل
سه شنبه 03 اردیبهشت 1392, 10:46 صبح
vahide amp

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

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

نمایش 50 پست از این تاپیک در یک صفحه

واحد زمان برحسب ساعت لندن +4. ساعت هم اکنون 20:31 عصر است.