سلام یک سوال فنی
من میخوام منو سایتم وقت اسکرول رو پایین میارم ابتدا سر جاش باشه وقتی منو پایین اومد به بالاترین نقطه سایت بچسبه و رو باشه یعنی زیر منو ها نره
خودم اینو به استایل نو اضافه کردم اما همون اول بالا میمونه بعد میره زیر منوها
Raya_Technologyposition:fixed;
top:-5px;درود .
چنین چیزی رو در سایت خارجی ندیدم . البته شاید باشه اما جستجو ی بنده ضعیف بوده . یک لینک پیدا کردم بخونید :
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery
+ سایتی که از این قابلیت استفده میکنه رو لینکش رو بزارید تا ببینم در استایلش از چ کدهایی استفاده کرده تا براتون استخراج کنم :)
این هم بررسی کنید . یه سری کد برای منو داده فکر کنم به دردتون بخوره :
http://wpmu.org/move-wordpress-theme-menus/
IMDe گفت:
درود .چنین چیزی رو در سایت خارجی ندیدم . البته شاید باشه اما جستجو ی بنده ضعیف بوده . یک لینک پیدا کردم بخونید :
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery
+ سایتی که از این قابلیت استفده میکنه رو لینکش رو بزارید تا ببینم در استایلش از چ کدهایی استفاده کرده تا براتون استخراج کنم :)
درود.
مثلا اینو ببینید http://tajali.com همون صفحه اصلی منو زیر هدر هست اسکرول رو میارم پایین بالاترین نقطه سایت ثابت میمونه و با اسکرولر میاد پایین
فقط همینطور که گفتم ثابت شدن پستیشن رو فیکسد کردن با top هم بالا نگهش داشتم اما مشکلم اینه که 1: میخوام زیر هدرم بمونه اسکرولر رو که پایین آوردم بهش رسید ثابت بمونه بیاد پایین و 2: رو باشه یعنی زیر نوشته ها و .. اینا نره
ممنون
چند مورد رو دیدم در اون سایت . اول اینکه در قسمت سورس منوها ، عبارت Fix وجود داره . به شکل زیر :
<nav id="main-nav"class="fixed-enabled">
کد قسمت منوها هم اینه :
ایران وردپرس/* Main Nav */
#main-nav {
margin:0 auto;
background:url(images/main-menu-bg.png) repeat-x bottom;
height:52px;
border-bottom:5px solid #F88C00 ;
}
#main-nav .menu-alert{
float:left;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav .main-menu{margin-left:10px;}
#main-nav ul li {
font-size:13px;
position: relative;
display: inline-block;
float: left;
border:1px solid #222222;
border-width:0 0 0 1px;
height:47px;
margin-top:5px;
}
#main-nav ul li:first-child,
#main-nav ul li:first-child a{border:0 none;}
#main-nav ul li:last-child a{border-right:0 none;}
#main-nav ul li a {
display: inline-block;
height: 47px;
line-height: 47px;
color: #ddd;
padding:0 10px;
text-shadow:0 1px 1px #000;
border-left:1px solid #383838;
}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding:0;
position: absolute;
top: 42px;
width: 180px;
z-index: 99999;
float: left;
background: #2d2d2d !important;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#main-nav ul li.current-menu-item ul,
#main-nav ul li.current-menu-parent ul,
#main-nav ul li.current-page-ancestor ul{ top: 52px;}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border:0 none;
border-bottom: 1px solid #222;
border-top: 1px solid #383838;
font-size:12px;
height:auto;
margin:0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;right: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border:0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #ccc !important;
text-shadow:0 1px 1px #000 !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color: #FFF ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:52px;
border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:#F88C00;
text-shadow:0 1px 1px #000;
color:#FFF;
height:52px;
line-height:52px;
border-left:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home a{
background-image:url(images/separate.png) !important;
background-repeat:no-repeat !important;
background-position:center -350px;
text-indent:-9999px;
height: 52px;
width: 35px;
}
#main-nav ul li.menu-item-home.current-menu-item a{background-position:center -292px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#top-menu-mob{
background: #FFF;
width: 500px;
padding: 5px;
border: 1px solid #ccc;
height: 26px;
color:#000;
margin:2px 0 0 10px;
}
#main-menu-mob{
background: #222;
width: 500px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 0 0 10px;
}
body.dark-skin #top-menu-mob{background: #222;border: 1px solid #000; color:#DDD;}
.fixed-nav{
position:fixed;
top:-5px;
width:1045px;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}
body.admin-bar .fixed-nav{top:23px;}اما بیشترین قسمت شک من در اینه :
#main-nav ul li {
font-size:13px;
position: relative;
display: inline-block;
float: left;
border:1px solid #222222;
border-width:0 0 0 1px;
height:47px;
margin-top:5px;
}---------------------------------------------
کد قسمت منوهای سایتی که دادین هم اینه :
<nav id="main-nav"class="fixed-enabled">
<div class="main-menu"><ul id="menu-%d8%aa%d8%ac%d9%84%db%8c" class="menu"><li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="http://www.tajali.com">صفحه اصلی</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-44"><a href="http://tajali.com/?cat=1">اخبار</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"><a href="http://tajali.com/?cat=2">تصویر</a></li>
<li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href="http://tajali.com/?cat=5">سیاست</a></li>
<li id="menu-item-181" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181"><a href="http://tajali.com/?cat=4">حوادث</a></li>
<li id="menu-item-183" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-183"><a href="http://tajali.com/?cat=17">خانواده و زندگی</a></li>
<li id="menu-item-184" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-184"><a href="http://tajali.com/?cat=18">ورزشی</a></li>
<li id="menu-item-185" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-185"><a href="http://tajali.com/?cat=19">پزشکی و سلامت</a></li>
<li id="menu-item-223" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-223"><a href="http://tajali.com/?cat=20">سرگرمی</a></li>
</ul></div> <a href="http://tajali.com/?tierand" class="random-article ttip" title="مطلب تصادفی">مطلب تصادفی</a>
</nav><!-- .main-nav /-->البته از اونجایی که من فهمیدم در سایت وردپرس اصلی ، افزونه هم برای اینکار هست :
http://imakewebthings.com/jquery-waypoints/sticky-elements/
http://labs.anthonygarand.com/sticky/
---------------------------------------------
در سایت ایرانی هم آموزش کامل داده شده که الان پیداش کردم :
http://www.webtarget.ir/blog/%D8%B3%D8%A7%D8%AE%D8%AA-sticky-menu-%DB%8C%D8%A7-%D9%85%D9%86%D9%88%DB%8C-%DA%86%D8%B3%D8%A8%D9%86%D8%AF%D9%87-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AC%DB%8C-%DA%A9/
موفق باشید
حل‌نشده
