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

hamid80 · اردیبهشت 92

با سلام من طبق اموزش های که در سایت بود موفق به طراحی یک قالب شدم ولی یک
مشکلی با منوهاش دارم فرض کنید شما بخواهید یک منو دو ستونه درست کنید که
این منوها کنار هم باشند که در عکس بیشتر توضیح دادم نمیشه تنظیمش کرد که
منو ها به صورت دو ستونه نمایش داده بشه و یا شما چند تا منو تو در تو
دارین و چند تا زیر منو دارین الان وقتی روی زیر منوی یک کلید می کنی زیر
منوهاش هم باز میشه در صورتی که نرمالش اینه که وقتی وارد یک زیر منو شدی
زیر منوهاش نمایش داده بشه نه کلیه منوها نمایش داده بشه

عکس منو دو ستونه کنار هم

یا در

عکس زیر منو ها مثلا من وقتی رو گزینه دمو3 می ریم طبق عکس زیر منوی هم که تو تست گذاشتم نمایش در می اید

کد ها

کد داخل index.php

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/superfish.js"></script>
<script type="text/javascript">
        jQuery(function(){
            jQuery('#menu ul').superfish({
            pathLevels    : 3,
            delay        : 300,
            animation    : {opacity:'show',height:'show',width:'show'},
            speed        : 'fast',
            autoArrows    : false,
            dropShadows : false,
            });        
        });        
</script>


<?php endif; ?>


</head>

<body>
    <div id="main">  
        <div id="heder">
            <?php if($this->countModules('search')): ?>
            <div id="search">
                <jdoc:include type="modules" name="search" style="xhtml" />          
            </div><!--End search-->
            <?php endif; ?>
        </div><!--End heder-->
        <?php if($this->countModules('menu')): ?>
        <div id="menu1"><div id="menu2"><div id="menu">
            <jdoc:include type="modules" name="menu" style="none" />  
        </div></div></div>
        <?php endif; ?>

داخل menu.css

PHP Code: (انتخاب همه)
/*menu*/

#menu1 { 
    direction:rtl;
    overflow: visible;
    color: #000;
    position: relative;
    z-index: 999;
}

#menu2 {}

#menu {  
    min-height: 40px;
    width:980px;
    background-color: #0784e4;
    background-image: -moz-linear-gradient(top, #0784e4, #0750e4); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0784e4), to(#0750e4)); 
    background-image: -webkit-linear-gradient(top, #0784e4, #0750e4); 
    background-image: -o-linear-gradient(top, #0784e4, #0750e4); 
    background-image: linear-gradient(to bottom, #0784e4, #0750e4);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F90', endColorstr='#FC0', GradientType=0);
    border: none; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px; border-radius: 8px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
    *zoom: 1;
}

#menu ul {
    margin:2px;
    padding:0;
}

#menu ul li {
    list-style:none;
    display:inline-block;
    position:relative;
    padding:0;
    margin:0;
    height:40px;
    border-left:1px solid #b5c5e5;
    font-family:pars,Arial, Helvetica, sans-serif;
}

#menu ul li a {
    display:block;
    padding:0 15px;
    margin:0;
    line-height:35px;
    text-decoration:none;
    font-size:15px;
    color:#000;
}

#menu .menu li a {
    color: #000;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

#menu .menu li a:hover {
    background-color: transparent;
    color: #CE205A;
    text-decoration: none;
    background-color: #0784e4;
    -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 .menu .active a,#menu .nav .active a:hover {
    color: #CE205A;
    text-decoration: none;
    background-color: #0784e4;
    -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 a span.menutitle {
     display:block;
}

#menu ul li a span.menudesc {
    float:right;
    clear:both;
    font-size:11px;
    line-height:12px;
    margin:-20px 0 0 0;
    font-family:pars,Arial, Helvetica, sans-serif
}

/* submenu */
#menu ul li ul {
    position:absolute;
    width:170px;
    right:-999em;
    margin:0;
    padding:5px;
    background-color: #b5c5e5;
    border: 1px solid #dedede;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#menu ul li a:hover {
    text-decoration:none;
    text-shadow:0px 1px 1px #FFF;
}

#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;
    border-right:none;
}

#menu ul li:hover ul li a {
    text-shadow:none;
    margin:0;
    padding:1px 10px 1px 0px;
    line-height:25px;
    font-size:14px;
    text-align:right;
}

#menu ul li:hover ul li {
    background:none;
}

#menu ul li:hover ul li a,
#menu ul li ul li a,
#menu ul li li ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a {
    color:#000;
    background:none;
    border:1px solid #b5c5e5;
}

#menu ul li ul li a:hover,#menu ul li ul li.active a,#menu ul li.active ul li a:hover,#menu ul li li ul li a:hover,#menu ul li ul li.active ul li.active a,#menu ul li ul li.active a,#menu ul li.active ul li a:hover {
    color: #000000;
    text-decoration: none;
    background-color: #7898d8;
    background-image: -moz-linear-gradient(top, #7898d8, #4d7dde);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7898d8), to(#4d7dde));
    background-image: -webkit-linear-gradient(top, #7898d8, #4d7dde);
    background-image: -o-linear-gradient(top, #7898d8, #4d7dde);
    background-image: linear-gradient(to bottom, #7898d8, #4d7dde);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff70e3e8', endColorstr='#ff28ccca', GradientType=0);
    border-color: #28ccca #28ccca #5da8c7;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style:solid; border-width:1px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

#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;
    padding:5px;
    margin:-5px 0 0 0;
}

کد های js

http://uploadtak.com/images/m3234_superfishamphoverint.zip

یکی از دوستان پیشنهاد داد کد از از منو ساز vtem استفاده بکنم

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

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

hamid80 · اردیبهشت 92

با سلام

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

مصطفی صفرعلی · اردیبهشت 92

با سلام

ابتدا فایل زیر را باز کنید

modules/mod_vtemmenu/assets/style.css

در خط 51 کد زیر قرار دارد

div.vt_menu_wapper ul.vt_menu li div.vt_nav div.vtemdrop-top{
background:url(images/arrow.png) 20px top no-repeat;
height:8px !important;
display:block !important;
_display:none;
*width:200px;
}

در خاصیت بکگراند به جای 20 مقدار 195 را جایگزین کنید

در خط 50 کد زیر قرار دارد

div.vt_menu_wapper ul.vt_menu li div.vt_nav ul li div.vt_nav{top:0 !important;}

خط زیر را به کد بالا اضافه کنید

margin: -16px 220px 0 0;

در خط 28 کد زیر قرار دارد

div.vt_menu_wapper ul.vt_menu li{
float:left;
margin:0;
padding:0;
position:relative;
text-align:left;
}

کد بالا را بصورت زیر ویرایش کنید

div.vt_menu_wapper ul.vt_menu li{
float:right;
margin:0;
padding:0;
position:relative;
text-align:right;
}

در خط 13 کد زیر قرار دارد

div.vt_menu_wapper ul.vt_menu{float:left;}

در کد بالا به جای left مقدار right را جایگزین کنید

اون فلشهای سمت چپ هر منو هم تصویریست به نام arrow.gif که در پوشه images ماژولتون قرار داره . میتونید با یک نرم افزار گرافیکی جهتش رو تغییر بدید

موفق و پیروز باشید

یا حق

ورود

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

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

پست های پیشنهاد شده

hamid80 0

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

hamid80 0

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

مصطفی صفرعلی 2,891

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

فهرست

فعالیت ها