masoud1373

سوال در مورد منوی آبشاری

5 پست در این موضوع

سلام

من میخوام با ul li منوی آبشاری بسازم.

کد css را به صورت زیر تعریف کردم.

#header .topmenu .moduletable ul.menu li.active.parent a,
#header .topmenu .moduletable ul.menu li.active.deeper.parent ul li.current.active  a,
#header .topmenu .moduletable ul.menu li.current.active a{color:#FF0;background:url(../images/topmenu.png) top repeat-x;border-radius:5px;}

#header .topmenu .moduletable ul li ul li{display:none;}
#header .topmenu  ul li:hover ul{border:1px solid #633a01;direction:rtl;display:block; background:#b9903c;float:right; margin:5px 0 0 0;border-radius:5px;}
#header .topmenu ul li:hover ul li{ display:block; width:100px;  margin-right:-22px;}

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

چی کار کنم؟؟؟

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

سلام توی فایل ایندکس قالبت از این کد به جای کلاس منوت استفاده کن

<div id="menu">
 <?php if($this->countModules('menu-center')): ?>
 <div id="menu-center">
   <jdoc:include type="modules" name="menu-center" style="xhtml" />
 </div>

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

/*start menu*/
#menu {
-moz-box-shadow: 0 9px 5px -5px #999;
-webkit-box-shadow: 0 9px 5px -5px #999;
box-shadow: 0 9px 5px -5px #999;
}
#menu-center {
background:#09F;
max-width: 980px;
margin: 0 auto;
direction:rtl;
}
#menu ul li {
display: inline-block;
font: normal 16px/40px "b koodak", bkoodak, arial;
position: relative;
}
#menu ul li a {
display: block;
padding: 0 12px;
color: #FFF;

}
#menu .menu li a:hover, #menu .menu .active ul li a:hover, #menu .menu .active ul li ul li a:hover {
background: #E8E8E8;
color: #0048B4;
}
#menu .menu .active a, #menu .nav .active a:hover {
color: #CE205A;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu ul li ul {
z-index: 99999;
position: absolute;
width: 170px;
right: -999em;
margin: 0;
padding: 5px 0;
background-color: #131313;
-webkit-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;

}
#menu ul li ul li a {
color: #fff;
font: normal 14px/26px "b koodak", bkoodak, arial;
}
#menu ul li:hover ul, #menu ul li.sfHover ul {
right: 0;
}
#menu ul li ul li:hover ul {
right: 170px;
top: 0;
}
#menu ul li ul li {
padding: 0;
height: auto;
width: 170px;
margin: 0 0 5px 0;
}
#menu ul li:hover ul li a {
padding: 1px 10px 1px 0px;
}
#menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right: -999em;
}
#menu .menu .active ul li a, #menu .menu .active ul li ul li a {
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 0, 0, 0);
}
/*start menu*/

دقت کن که موقعیت منوی اصلی رو روی menu-center ست کنید

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

Share this post


Link to post
Share on other sites
سلام توی فایل ایندکس قالبت از این کد به جای کلاس منوت استفاده کن

<div id="menu">
 <?php if($this->countModules('menu-center')): ?>
 <div id="menu-center">
   <jdoc:include type="modules" name="menu-center" style="xhtml" />
 </div>

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

/*start menu*/
#menu {
-moz-box-shadow: 0 9px 5px -5px #999;
-webkit-box-shadow: 0 9px 5px -5px #999;
box-shadow: 0 9px 5px -5px #999;
}
#menu-center {
background:#09F;
max-width: 980px;
margin: 0 auto;
direction:rtl;
}
#menu ul li {
display: inline-block;
font: normal 16px/40px "b koodak", bkoodak, arial;
position: relative;
}
#menu ul li a {
display: block;
padding: 0 12px;
color: #FFF;

}
#menu .menu li a:hover, #menu .menu .active ul li a:hover, #menu .menu .active ul li ul li a:hover {
background: #E8E8E8;
color: #0048B4;
}
#menu .menu .active a, #menu .nav .active a:hover {
color: #CE205A;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu ul li ul {
z-index: 99999;
position: absolute;
width: 170px;
right: -999em;
margin: 0;
padding: 5px 0;
background-color: #131313;
-webkit-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;

}
#menu ul li ul li a {
color: #fff;
font: normal 14px/26px "b koodak", bkoodak, arial;
}
#menu ul li:hover ul, #menu ul li.sfHover ul {
right: 0;
}
#menu ul li ul li:hover ul {
right: 170px;
top: 0;
}
#menu ul li ul li {
padding: 0;
height: auto;
width: 170px;
margin: 0 0 5px 0;
}
#menu ul li:hover ul li a {
padding: 1px 10px 1px 0px;
}
#menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right: -999em;
}
#menu .menu .active ul li a, #menu .menu .active ul li ul li a {
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: rgba(255, 0, 0, 0);
}
/*start menu*/

دقت کن که موقعیت منوی اصلی رو روی menu-center ست کنید

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

با تشکر از شما

مشکل پابرجاست.

و حل نشده.

لطفا راهنمایی کنید.

Share this post


Link to post
Share on other sites
با تشکر از شما

مشکل پابرجاست.

و حل نشده.

لطفا راهنمایی کنید.

کدی که دادم توی قالب جوملاتون به درستی کار میکنه ولی اگر حتما میخواهید از ul li در خود html استفاده کنید به این صورت عمل کنید

<div id='cssmenu'>
<ul>
  <li class='active'><a href='index.html'><span>Home</span></a></li>
  <li class='has-sub'><a href='#'><span>Products</span></a>
     <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
           <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li class='last'><a href='#'><span>Sub Item</span></a></li>
           </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
           <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li class='last'><a href='#'><span>Sub Item</span></a></li>
           </ul>
        </li>
     </ul>
  </li>
  <li><a href='#'><span>About</span></a></li>
  <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

و برای CSS خود اینگونه استایل بنوسید

@charset 'UTF-8';
/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#cssmenu > ul {
 position: relative;
 z-index: 597;
}
#cssmenu > ul li {
 float: right;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
#cssmenu > ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 right: 0;
 z-index: 598;
 width: 100%;
}
#cssmenu > ul ul li {
 float: none;
}
#cssmenu > ul ul ul {
 top: 1px;
 right: 99%;
}
#cssmenu > ul li:hover > ul {
 visibility: visible;
}
/* Align last drop down RTL */
#cssmenu > ul > li.last ul ul {
 right: auto !important;
 left: 99%;
}
#cssmenu > ul > li.last ul {
 right: auto;
 left: 0;
}
#cssmenu > ul > li.last {
 text-align: right;
}
/* Theme Styles */
#cssmenu > ul {
 border-top: 4px solid #3fa338;
 font-family: Calibri, Tahoma, Arial, sans-serif;
 font-size: 14px;
 background: #1e1e1e;
 background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
 background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
 background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
 width: auto;
 zoom: 1;
 direction:rtl;
}
#cssmenu > ul:before {
 content: '';
 display: block;
}
#cssmenu > ul:after {
 content: '';
 display: table;
 clear: both;
}
#cssmenu > ul li a {
 display: inline-block;
 padding: 10px 22px;
}
#cssmenu > ul > li.active,
#cssmenu > ul > li.active:hover {
 background-color: #3fa338;
}
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:active,
#cssmenu > ul > li > a:visited {
 color: #ffffff;
}
#cssmenu > ul > li > a:hover {
 color: #ffffff;
}
#cssmenu > ul ul ul {
 top: 0;
}
#cssmenu > ul li li {
 background-color: #ffffff;
 border-bottom: 1px solid #ebebeb;
 font-size: 12px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
 background-color: #F5F5F5;
}
#cssmenu > ul > li.hover,
#cssmenu > ul > li:hover {
 background-color: #3fa338;
 -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
 -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
 box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
#cssmenu > ul a:link,
#cssmenu > ul a:visited {
 color: #9a9a9a;
 text-decoration: none;
}
#cssmenu > ul a:hover {
 color: #9a9a9a;
}
#cssmenu > ul a:active {
 color: #9a9a9a;
}
#cssmenu > ul ul {
 border: 1px solid #CCC 9;
 -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
 box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
 width: 150px;
}

موفق باشید

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری