انجمن


ثابت نگه داشتن منو در قالب  (۶ نوشته)

  • Raya_Technology

    آفلاین
    عضو
    تعداد نوشته‌ها: ۴۲
    تشکر شده: ۱۶ بار
    # نوشته شده: ۸ سال پیش
    ۱۳ فروردین ۱۳۹۲ - ۱۸:۵۹

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

    position:fixed;
    top:-5px;
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    forklift
  • ایران وردپرس

    آفلاین
    عضو
    تعداد نوشته‌ها: ۱۷۲۹
    تشکر شده: ۹۵۲ بار
    # نوشته شده: ۸ سال پیش
    ۱۳ فروردین ۱۳۹۲ - ۱۹:۲۸

    درود .

    چنین چیزی رو در سایت خارجی ندیدم . البته شاید باشه اما جستجو ی بنده ضعیف بوده . یک لینک پیدا کردم بخونید :

    http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

    + سایتی که از این قابلیت استفده میکنه رو لینکش رو بزارید تا ببینم در استایلش از چ کدهایی استفاده کرده تا براتون استخراج کنم :)

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    Raya_Technology
  • ایران وردپرس

    آفلاین
    عضو
    تعداد نوشته‌ها: ۱۷۲۹
    تشکر شده: ۹۵۲ بار
    # نوشته شده: ۸ سال پیش
    ۱۳ فروردین ۱۳۹۲ - ۱۹:۳۱

    این هم بررسی کنید . یه سری کد برای منو داده فکر کنم به دردتون بخوره :

    http://wpmu.org/move-wordpress-theme-menus/

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    Raya_Technology
  • Raya_Technology

    آفلاین
    عضو
    تعداد نوشته‌ها: ۴۲
    تشکر شده: ۱۶ بار
    # نوشته شده: ۸ سال پیش
    ۱۳ فروردین ۱۳۹۲ - ۱۹:۳۷

    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 /-->
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    Raya_Technology
  • ایران وردپرس

    آفلاین
    عضو
    تعداد نوشته‌ها: ۱۷۲۹
    تشکر شده: ۹۵۲ بار
    # نوشته شده: ۸ سال پیش
    ۱۳ فروردین ۱۳۹۲ - ۲۰:۴۷

    البته از اونجایی که من فهمیدم در سایت وردپرس اصلی ، افزونه هم برای اینکار هست :

    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/

    موفق باشید

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    Raya_Technology

درباره‌ی این موضوع



برچسب‌ها

هیچ برچسبی نیست.