حالت موضوعی | حالت خطی

**hamid80**

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

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

دمو

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

**سعید حمزه زاده**

دوست عزیز ساختار این نوع منو با منوی عادی فرق داره!

**hamid80**

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

**hamid80**

من امدم یک فایل css درست کردم به نام menu بعد این کدها را داخلش نوشته با دستور import امدم فراخوانیش کردم تو template .css و یک موقعیت داخل index.php ایجاد کردم
کد داخل 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: (انتخاب همه)

/*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
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

**hamid80**

با سلام
من یک سوال در انجمن مطرح کردم یک سری مشکل داشتم متاسفانه هنوز کسی پاسخی به سوال من نداده مممنون می شوم بررسی کنید و مشکل اینجانب را حل نمایید با تشکر

**Reza Ganji**

درود
ویرایش منو کار وقت گیری هست و باید یکی از دوستان که سی اس اس بلده وقت بزاره و برای شما ویرایش کنه.
نظر من اینه شما منو ابشاری vtem رو که بصورت وارز هم میتونید پیدا کنید دانلود کنید و استایل ها رو بنا به سلیقه خودتون ویرایش کنید و فکر نمیکنم بهتر از اون منو پیدا کنید.
از مگامنوها هم میتونید استفاده کنید البته اگر نیاز به نمایش ماژول در منو دارید.
راکت تم و آیس تم مگامنوهای خوبی دارند.

**hamid80**

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

**hamid80**

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

الان ساختارش این طوریه
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دمو
persian-learn.ir/demo

**Reza Ganji**

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