رفتن به مطلب

ساخت زیر منو برای منو های سایت با css


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

با سلام و خسته نباشید یک منو من دارم که میخوام زیر منوی های اون رو ایجاد کنم با استفاده از css که وقتی روی منو کلیک کردم به صورت فیید شده و آهسته زیر منو های من باز شود. آیا باید از جیکوئری هم استفاده کنم ؟ میشه من رو راهنمایی بفرمایید و اگر آماده ی این هست برای من قرا بدین؟ من عکس منو هام رو قرار میدم در پایین و سایت نمونه هم میزارم براتون

سایت نمونه

دقیقا مثل همین میخوام

menu%2022.jpg

عکس منو های خودم در پایین

menu%20template.jpg

ویرایش شده توسط M.At
لینک به ارسال

اگر به دنبال منوی dropdown جستجو کنید به نتیجه میرسید

نمونه

http://www.irpcn.com/web/drop-down-menu.html

http://rokesh.ir/wordpress-tutorials-making-drop-down-menu-for-wordpress/

لینک به ارسال

آیا خاصیت در css

border-left:1px solid #F3F3F3;

نازکتر هم هست یعنی به جای 1px کم تر هممیشه استفاده کرد مثلا 0.5 یا نازکتر؟

لینک به ارسال

مرسی از جوابهای سریع و مفیدت پارسا جان

یک سوال من این منو رو پیدا کردم لینک

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

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

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

این هم کدهایی که من استفاده کردم


<nav>
<?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu( array( 'theme_location' => 'primary' ) );
}
else {
wp_page_menu();
}
?></nav>


nav {
margin:0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {

list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: right;
height:70px;
line-height:70px;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
nav ul li:hover {
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
text-decoration: none;
font-size: 15px;
text-align:center;
color: #fff;
width:189px;

}


nav ul ul {
border-radius: 0px;
position: absolute; top: 100%;
border-top: 1px solid #BFE7FE;
}
nav ul ul li {
float: none;
background:#248FCA;
width:188px;
height:150px;
line-height:33px;
position: relative;
}
nav ul ul li a {
color: #fff;
}
nav ul ul li a:hover {
background: #78CCFD;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

لینک به ارسال

با خاصیت زیر می تونید مدت زمان نمایش و یا تغییر رنگ عناصر در صفحه را تعیین کنید در مورد سوال بعدی شما که می خواهید از بالا به پایین باز شود به طور حتم باید از JQuery استفاده شود


transition: all 200ms ease 0s;

ویرایش شده توسط XeonIran
لینک به ارسال

با خاصیت زیر می تونید مدت زمان نمایش و یا تغییر رنگ عناصر در صفحه را تعیین کنید در مورد سوال بعدی شما که می خواهید از بالا به پایین باز شود به طور حتم باید از JQuery استفاده شود


transition: all 200ms ease 0s;

ممنون از خاصیت z-index: 999 استفاده کردم درست شد

اما جی کوئری؟؟؟؟ به چه صورت مشابه ندارد جایی باشه استفاده کنم ؟

لینک به ارسال

و برای اینکه وقتی روی یک منو کیک میکنم و داخل اون صفحه میره میخوام رنگ اون منو مثلا آبی بشه ؟ اون چه جوریه؟

لینک به ارسال

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

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...