رفتن به مطلب

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

سلام

من می خواستم برای منوی سایت این امکان رو فراهم کنم که با اسکرول شدن صفحه به پایین، زمانی که منو به بالای سایت میرسه همون لحظه در همونجا بمونه و وقتی مجدد به بالا برگشتیم منو بیاد سر جای اصلی خودش.

قالب من در حال حاضر با این ساختار هست:

***

منو اول که برگه ها در اون به صورت اتوماتیک نشون داده میشه (این هیچی)

تصویر هدر و لوگوی سایت (اینم هیچی)

منوی دوم سایت که زیر هدر قرار داره و میخوام این منو با اسکرول به هدر بچسبه.

***

توی نت و فروم در مورد این موضوع سوال شده بود ولی راهنمایی های خوبی برای انجام این مورد روی وردپرس ندیدم

برای مثال لینک های زیر رو پیدا کردم ولی موفق نشدم خوب از این ها یه جمع بندی برای انجام این کار کنم :wacko:

لینک اول

لینک دوم

لینک سوم

کد منوی من به صورت زیر است:


<div class="navbar">
<div class="middle">
<?php
$argsmenu = array(
'theme_location' => 'top_menu',
'container' => false,
'menu_class' => 'main_menu',
'depth' => 1,
'walker' => new themeslug_walker_nav_menu
);
wp_nav_menu($argsmenu);
?>
</div><!--Middle -->
</div><!--Navbar -->

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


/*----- Navigation ----------------------------------------*/
.navbar {
width:100%;
float:right;
background:url(images/nav_bg.png) repeat-x;
height:41px;
}
.navbar ul{
list-style: none;
}
.navbar li {
float:right;
background:url(images/nav_left.jpg) no-repeat left -36px;
height:40px;
line-height:34px;
text-align:center;
border-left: 1px solid #414141;
border-right: 1px solid #151515;
}
.navbar li a {
padding:0 15px 0 15px;
height:40px;
color:#fff;
}
.navbar li a:hover{
background:url(images/nav_bg_hover.png) repeat-x;
color:#63CDF3;
}
.base {
width:100%;
float:right;
}

قسمت دیگری از استایل:


.middle {
width:1000px;
margin: 0 auto;
position:relative
}

لینک به ارسال

جناب آقای فخار عزیز جز اینکه بگم تشکر و خدا خیرت بده و بهترین هارو برات آرزو می کنم که اینجوری به همه کمک میکنی چیز دیگه ای نمیتونم بگم :)

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

لینک به ارسال

با سلام و احترام

جناب آقای فخار عزیز من کد زیر رو در استایل قالب اضافه کرد:


/* | ezafe shode */
#wpparsitopmenu {
width:100%;
position:relative;
clear:both;

}
#wpparsitopmenu .wpptmnav {
display:inline-block;list-style:none;float:right;margin-right:100px;
}
#wpparsitopmenu .wpptmnav li {
display:inline-block;padding-right:10px;
}
#wpparsitopmenu .wpptmnav li a,
#wpparsitopmenu .wpptmnav li a:link,
#wpparsitopmenu .wpptmnav li a:visited
{
text-decoration:none;color:#ccc;
display:block;
padding-left:3px;
padding-right:3px;
}
#wpparsitopmenu .wpptmnav li a:hover,
#wpparsitopmenu .wpptmnav li a:active
{
text-decoration:none;color:#FFF;
background:#000000;
}
/* | ezafe shode */

سپس کد زیر رو قبل از بسته شدن تگ head قرار دادم:


<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() {
if ($(window).scrollTop() >= 300) {
$("#wpparsitopmenu").css({"position": "fixed", "top" : "0px" });
} else {
$("#wpparsitopmenu").css({"position": "relative", "top" : "auto" });
}
})
});//]]>
</script>

و کد منوی من به این صورت شده:


<div id="wpparsitopmenu">
<div class="navbar">
<div class="middle">
<ul class="wpptmnav">
<?php
$argsmenu = array(
'theme_location' => 'top_menu',
'container' => false,
'menu_class' => 'main_menu',
'depth' => 1,
'walker' => new themeslug_walker_nav_menu
);
wp_nav_menu($argsmenu);
?>
</ul>
</div><!--Middle -->
</div><!--Navbar -->
</div><!--wpparsitopmenu -->

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

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

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

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

در تمامی کلاس های مرتبط کدی که فرمودید رو قرار دادم ولی مجدد مشکل پابرجا هست

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


#wpparsitopmenu {
width:100%;
position:relative;
clear:both;
z-index:999999;
}

اگر مشکل باقی بود مقدار 999999 را افزایش دهید

در قالب شما


z-index:999999999;

لینک به ارسال

با اضافه کردن 9 به عدد اصلی تنها بعد از رول شدن و رد کردن منو از جای اصلی، منو در زمان رول سریع تر نمایش داده میشود و مشکل نمایش منو پشت ساید بار و پست ها هنوز پابرجا است

کد با تغییرات نهایی به صورت زیر شد:


z-index:99999999999999;

این همه 9 اضافه کردم :)

لینک به ارسال

در سورس قالب ببینید که بازم z-index دارید مقدار منو را از اون بیشتر کنید ...

لینک به ارسال

در سورس قالب ببینید که بازم z-index دارید مقدار منو را از اون بیشتر کنید ...

سورس قالب یا استایل؟

خیر در جای دیگری وجود ندارد

لینک به ارسال

من جوابتون رو براتون گذاشتم همون عدد رو استفاده کنید و در زیر منو ها z-index را از کدهای استایل حذف کنید

لینک به ارسال

آقای فاخر من فقط کدی که شما فرمودید رو در استایل قرار دادم و در دیگر قسمت های استایل z-index وجود نداره!

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

منو در مورگر کروم به صورت صحیح نمایش داده میشه ولی توی فایرفاکس مشکل هنوز هست و زیر پست ها میره!

لینک به ارسال

کوکی و کش ها را حذف کنید

برای مشاهده تغییرات استایل اغلب بهتره یکبار مرورگر باز و بسته بشه

لینک به ارسال

بخدا آقای فاخر من کوکی ها با کش رو خالی کردم و ده دقیقه هم مرورگر رو بستم مجدد باز کردم ولی توی فایرفاکس منو زیر پست ها میره - برای شما توی مرورگر فایرفاکس این مشکل وجود نداره؟

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

لینک به ارسال

قالب شما قبلا دو تا کد z-index داشت که مجبورر بودید z-index رو بالا بگیرید الان z-index رو بگذارید 99 درست می شه

لینک به ارسال

اقای فخار فرمایش شمارو انجام دادم:

1- در مرورگر کروم همه چیز اوکیه

2- در مرورگر اینترنت اول که به پایین اسکرول می کنیم همه چیز درست هست ولی بعد از اینکه دوباره به بالا رول می کنیم کلا قالب میریزه بهم

3- در مرورگر فایرفاکس هم مشکل قبلی که منو زیر پست ها قرار میگرفت و نصفه میشد وجود داره

پیشنهادی برای من و بررسی و رفع مشکل دارید؟

لینک به ارسال

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

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

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

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

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

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

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

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

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