soheilyou

تفکیک کردن خروجی wp_nav_menu و اختصاص class و id به قسمت های مختلف برای ساخت منوی آبشاری

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

من میخوام یه منوی آبشاری واسه خودم درست کنم با css و jquery

اساسش رو که تو یه فایل html ساده درست کردم به طوری که وقتی موس روی یه div میره juery یه div رو که مخفی بوده رو slidedown میکنه ! با این کد ها :

Html :


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<!--------------------------------------------------------------------------------->
<script>
$(document).ready(function(){

$(".mother").mouseenter(function(){
$("#child").slideToggle("fast");
});

$(".mother").mouseleave(function(){

$("#child").slideUp("fast");
});

$(".child").mouseleave(function(){
$("#child").slideUp("fast");
});


});
</script>
</head>
<body>

<div class="mother" id="mother">
<div id="menuspace">slider </div>
<div class="child" id="child">slider </div>
</div>
</body>
</html>

css:


#mother{


width:300px;
height:100px;
background-color:#F93;
border: 1px solid black;
margin-bottom:4px;
}
#child{


width:300px;
height:200px;
background-color: #F3C;
border: 1px solid #6CF;
margin-bottom:4px;
display:none;
position:relative;

}
#menuspace
{
height:104px;}

الان من میخوام همین مبنای منو های خودم باشه ولی مشکلی که دارم اینه که من برای محتویات منو از کد :


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

استفاده میکنم و یه خروجی میده با یه سری nav و ul و li که میشه بهشون استایل داد ولی فقط با آدرس دادن نسبی مثلا اینجوری :


nav > ul > li > a {
font-family:BYekan, Tahoma, Geneva, sans-serif;
padding: 10px 20px;
}

منظورم اینه که مثلا برای یه دونه از دسته های خاص نمیشه کلاس یا آدی متمایز اختصاص داد !

اگه بتونم اینکار رو بکنم متونم دونه دونه از قسمت های خروجی رو با کلاس های متمایز جدا کنم و اونوقت مشخص کنم که مثلا وقتی موس رو div با Id="mother" رفت div با id="child" رو slidedown کنه !

37260896776279840422.jpg

post-4921-0-98194800-1391700877_thumb.jp

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط javadmezgi
      با سلام و احترام خدمت همه برنامه نویسان عزیز.
      سایتی که که من با قالب آماده راه اندازی کردم، زیر منو ها رو نمایش میده
      اما
      این زیر منو ها کنار هم چیده می شوند.
      لطفا سایت رو مشاهده کنید
      hb2018.ir
       
      من میخوام که این زیر منو ها ، زیر هم قرار بگیرند نه کنار هم
      لطفا راهنمایی کنید
      با عرض پوزش با کد نویسی آشنایی ندارم. کد بخش mega meno رو از قسمت style.css  براتون در زیر آوردم.
      لطفا اگر نیاز به ویرایش داره راهنمایی کنید
      #top-menu{ -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 7px rgba(0,0,0,.2); box-shadow: 1px 1px 7px rgba(0,0,0,.2); } .navbar, .dropdown-menu, .navbar .nav>li>a, .dropdown-menu>li>a, .nav{ font-size: 14px; } .navbar-brand { font-size: 15px; } .megamenu>li>a, .navbar .navbar-nav>li>a { padding-right: 5px; padding-left: 5px; } .megamenu .menu-item-description { text-indent: 20px; } .megamenu .submenu-link { margin-bottom: 5px; padding: 5px; } .megamenu .dropdown-menu { padding-top: 10px; } .megamenu .dropdown-menu * { z-index: 10000; -webkit-backface-visibility: hidden; /* fix for chrome white flash */ } .megamenu .dropdown-menu a.submenu-title-link:hover, .megamenu .dropdown-menu a.submenu-child-link:hover{ font-weight: bold; padding-right: 0; padding-left: 10px; } .dropdown-menu { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: .5s; animation-duration: .5s; } .megamenu .dropdown { position: static !important; } .megamenu .dropdown-menu a, .megamenu .menu-item-description{ display: block; } .megamenu .dropdown-menu * { white-space: nowrap; } @media screen and ( min-width: 768px ) { .megamenu > li.dropdown:hover > ul.dropdown-menu, .megamenu .open > .dropdown-menu { left: auto; display: table; border-right: 2px solid red; max-width: 85%; } .megamenu .menu-col { display: table; } } @media screen and ( max-width: 768px ) { .megamenu .nav{ display: initial; } .megamenu .open > .dropdown-menu { display: block; } .megamen .dropdown-menu li { display: block; } } .navbar-right.megamenu .dropdown-menu { left: auto; right: 1; } #bottom-navbar-collapse{ text-align: center; } #bottom-navbar-collapse .navbar-nav{ display: inline-block; float: none; } #bottom-navbar-collapse .navbar-nav>.active>a { background-color: inherit; background-image: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; }  
    • توسط Ali Brm
      سلام خدمت دوستان
      توی قسمت‌های مختلف وردپرس و توی قالب بخشی وجود داره که میشه کلاس CSS یا ID اون رو اضافه کرد. من با کلاس‌ها و ID آشنایی دارم ولی نمی‌دونم چه جوری باید از اون استفاده کرد. اگه امکانش هست یه توضیح با یک مثال بفرمایید.
      ممنون

    • توسط Ali Brm
      سلام دوستان
      بعضی افزونه‌ها میتونن به صورت گرافیکی یا دستی بیان و ظاهر سایت رو تغییر بدن. مثلا با افزونه مداد زرد میشه کلی توی کد ظاهری سایت دست برد.
      من خودم به CSS و HTML آشنایی دارم ولی سوالی که برام پیش میاد اینه که افزونه ای مانند مداد زرد کدهای CSSاش رو کجا مینویسه
      یه مثال کوچیک بزنم. مثلا اگه دستی برم توی کدهای قالبم و دستی روی فایلش یه تغییری ایجاد کنم خب تغییر اعمال میشه ولی وقتی میرم تنظیمات قالب توی وردپرس و ذخیره تنظیمات رو میزنم همه کدهایی که دستی وارد کردم همه میپره. دلیلش رو میدونم اینه که خب کدهای برنامه نویسی این کدها را میسازند برای همین وقتی "ذخیره تنظیمات" زده میشه همه کدها از اول نوشته میشن (تا حدودی)
      ولی سوالم اینه که چرا مداد زرد یا Visual Composer این اتفاق براش نمیوفته. ینی کدهاش رو کجا می‌نویسه که باقی می‌مونه؟
    • توسط Ali Brm
      با سلام خدمت دوستان
      سوالی که داشتم درباره شخصی سازی قالب سایتم است.
      در حال طراحی قالب سایتم هستم و از قالب publisher استفاده میکنم. در بعضی قسمت ها مثلا لوگوی سایت، اطراف آن Padding: 25px وجود داره. به فایل CSS قالب رجوع کردم و این عدد رو به 0px تغییر دادم و بعد از سیو مشکلم حل شد و padding اطراف لوگوی سایتم نبود. مشکل اینجاست که مثلا در تنظیمات قالب با استفاده از خوده ورد پرس و خوده ابزارهای قالب کافیه گزینه "ذخیره تنظیمات" رو بزنم تا همه چی دوباره برگرده و Padding مجدد بوجود میاد. این رو هم میدونم که اینها یک سری کد هستند که با زدن "ذخیره تنظیمات" اجرا میشن و اعدادی که دستی تغییر دادم رو مجدد با تنظیمات از پیش تعریف شده قالب رونوشت میکنن. حالا میخوستم بدونم راه حل چیه؟ این یکی از موارد بود. مثلا شاید بخوام هدر سایتم ارتفاع خاصی داشته باشه یا رنگ متنی رو جدا تغییر بدم. چه جوری میتونم این مشکل رو حل کنم؟
      سعی کردم توضیح واضح باشه اگه گویا نیست دوستان بفرمایند تا بیشتر توضیح بدم.
      ممنون و متشکر
    • توسط ashkan91
      با سلام و خسته نباشید
      موضوع: تغییر دادن رنگ قسمتهای مختلف بدنه یک سایت بدون استفاده از بخش css اضافی وردپرس
      من یک سایت دارم که از یک قالب مادر ارث میبرد . وقتی از قسمت ویرایشگر وردپرس قالب سایتم وارد بخش CSS پوسته مادر سایتم میشوم و اقدام به تغییر کد رنگ قسمتهای مختلف سایتم میکنم متاسفانه رنگ آن قسمتهای مذکور تغییر نمی کند و همچنان قسمتهای مذکور برنگ خودشان هستند علت چه هست؟ و آیا تنظیم جای دیگری را نیز باید تغییر داد یا خیر؟
      حاوی اسکرینشات