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

کد زیر به style.css قالب اضافه کنید :
nav {

background: none repeat scroll 0 0 #708090;
height: 40px;
margin: 30px auto 0;
width: 1000px;
}
nav ul li a {
color: #485868;
display: block;
float: right;
font-family: tahoma;
font-size: 15px;
padding: 10px 15%;
text-decoration: none;
}
nav > ul > li > a {
padding: 10px 20px;
}
nav ul li {
margin: 0;
position: relative;
}
nav ul li ul {
background: none repeat scroll 0 0 #708090;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 100%;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 170px;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul li ul li ul {
border-right: 1px solid #5D6D7D;
right: 100%;
top: 0;
z-index: 2;
}
nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
nav > ul > li {
background: none repeat scroll 0 0 #87CEEB;
border-left: 1px solid #73BAD7;
display: block;
float: right;
}
nav ul li ul li a {
border-bottom: 1px solid #637383;
color: #333333;
float: none;
text-align: right;
width: 70%;
z-index: 2;
}
nav ul li ul li {
clear: both;
display: block;
float: none;
position: relative;
width: 100%;
z-index: 2;
}

کد زیر هم جهت فراخانی در هرجایی از پوسته :

<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'nav', 'menu_class' =>'topnav' ) ); ?>

کد زیر هم به فانکشن قالب اضافه کنید:

function register_my_menus() {

register_nav_menus(
array(
'top-menu' => __( 'منو بالا' )
)
);
}

add_action( 'init', 'register_my_menus' );

اینو من براتون خلاصه کردم که دیگه دو ساعت css ننویسید یه دفعه بزارید تو استایل Big Grin

منبع
نویسنده :

X
افزودن واترمارک به تصاویر پیوست
خب شاید شما دوست داشته باشید که برای تصاویری که برای پست ها و پیوست هاتون ، آرم یا نشانه ای بزارید ...
پلاگین 1.6 / 1.8
دیدگاه های کاربران 1

ارسال: 2
دمتون گرم برای این قسمت از سایتم خواستمش اوکی شد

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :