ساخت منو چسبان با CSS و ستون ثابت در سایدبار

ساخت منو چسبان با CSS

ساخت المان های چسبنده یا ثابت امروزه در طراحی های مدرن وب رواج بسیار دارد، حتما شما هم در بعضی سایت ها المان هایی مثل منو ناوبری در هدر یا سایدبار دیده اید که هنگام اسکرول صفحه جایگاه آن ها ثابت مانده و تا پایین صفحه همراه شما می ‌آیند. در این مقاله ساخت منو چسبان با CSS یا هر المان دیگری را که می خواهید به این حالت در بیاورید آموزش داده شده است. حتی اگر یک سایت وردپرسی دارید و کمی با CSS آشنا هستید باز هم این مقاله برای شما مفید خواهد بود.

راهنمای استفاده از Sticky Position

این ویژگی در css3 اضافه شده و خاصیتی شبیه به پوزیشن relative دارد، اما در آن حالت المنتی از جریان عادی صفحه خارج نمی‌شود، درحقیقت المنت sticky تاثیری بر روی المنت های مجاور خود ندارد و همچنین روی المنت پدر خود قرار نمی‌گیرد با مثال زیر همه چیز روشن خواهد شد ابتدا به معرفی کد آن می پردازیم:

    position: -webkit-sticky;  // required for Safari
    position: sticky;
    top: 0; // required as well.

• خط اول و دوم به معرفی پوزیشن استیکی در مروگرهای متداول و هم چنین Safari می پردازد.
• خط دوم مقدار فاصله ای است که از بالای Div پدر خود دارد.

مثالی از ساخت منو چسبان با CSS

گام اول) ساختار HTML

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

    <div class="main">
	
	<div id="header">
	     ساخت منوی چسبان - آموزشگاه آنلاین فرازگر
	</div>
	
	<div id="content">
		<div>
			<div id="box_element">
				<ul>
					<li>لینک اول</li>
					<li>لینک دوم</li>
					<li>لینک سوم</li>
				</ul>
			</div>
		</div>
		
		<div>
			<div style="height:1500px; display:block; border:1px solid #dbdbdb; margin:20px;">
				محتوای شما اینجا قرار می گیرد.
			</div>
		</div>
	</div>
	
	<div id="footer">
		 فوتر
	</div>
	
	
	</div>

گام دوم) ساختار CSS

• خط 20 ام ارتفاع 1500px به محتوا اختصاص دادیم تا اسکرول منو بخوبی دیده شود.
• خط 10 ام id="box_element" قسمتی است که می خواهیم آن را چسبان کنیم.
• مهم: در خط 9 ام div قرار دارد که محتوای sticky ما در آن قرار می‌گیرد. دقت کنید این div، سایدبار اصلی ما است. ذکر این نکته برای این ضروری است که ارتفاع div پدر که قرار است المان چسبان ما در آن حرکت کند را همیشه در نظر بگیرید. در اینجا ارتفاع سایدبار ما ارتفاعی معادل محتوای ما دارد.

.main{ 
    background:#f9f9f9;
    width:80%;
    margin:auto;
    border:1px solid #ddd;
  }
  
  #header, #footer{
    width:95%;
    background:#f1f1f1;
    height:30px;
    margin:Auto;
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
  }
  
  #content{
    width:95%;
    background:#f1f1f1;
    margin:Auto;
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
    display:grid;
    grid-template-columns: 0.3fr 0.7fr;
  }
  
  #box_element{
    top:20px;
    position:sticky;
    
    display:block;
    background:#fff;
    height:100px;
    border-right: 1px solid blue;
    border-radius: 10px; 
    margin:10px;
    
    -webkit-box-shadow: 0px 0px 11px 5px rgba(0,0,0,0.26);
-moz-box-shadow: 0px 0px 11px 5px rgba(0,0,0,0.26);
box-shadow: 0px 0px 11px 5px rgba(0,0,0,0.26);
  }
  
 #box_element ul{
    list-style:none;
    text-align:right;
    padding:10px;
}