ایجاد منوی پیمایش آکاردئون با CSS3

ایجاد منوی پیمایش آکاردئون با CSS3

امروز در این آموزش قصد داریم تا به شما نحوه ایجاد یک منوی پیمایش که مشهور به accordion است رو بدهیم.امیدورایم از این آموزش لذت ببرید.با ما همراه باشید.


دریافت فایل  پیش نمایش

HTML

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

<ul class="accordion">
			
	<li id="one" class="files">

	     <a href="#one">فایل های من<span>495</span></a>

	     <ul class="sub-menu">
					
	         <li><a href="#one"><em>01</em>دراپ باکس<span>42</span></a></li>
					
	         <li><a href="#one"><em>02</em>اسکای درایو<span>87</span></a></li>

	         <li><a href="#one"><em>03</em>FTP سرور<span>366</span></a></li>

	     </ul>

	  </li>
			
	<li id="two" class="mail">

		<a href="#two">ایمیل<span>26</span></a>

		<ul class="sub-menu">
					
		  <li><a href="#two"><em>01</em>هات میل<span>9</span></a></li>
					
		  <li><a href="#two"><em>02</em>یاهو<span>14</span></a></li>

		  <li><a href="#two"><em>03</em>جی میل<span>3</span></a></li>

		</ul>

	    </li>
			
	   <li id="three" class="cloud">

		 <a href="#three">ابری<span>58</span></a>

		 <ul class="sub-menu">
					
		   <li><a href="#three"><em>01</em>اتصال<span>12</span></a></li>
					
		   <li><a href="#three"><em>02</em>مشخصات<span>19</span></a></li>

		   <li><a href="#three"><em>03</em>تنظیمات<span>27</span></a></li>

		  </ul>

		</li>
			
             <li id="four" class="sign">

		 <a href="#four">خروج</a>

		  <ul class="sub-menu">
					
		    <li><a href="#four"><em>01</em>خارج شدن</a></li>
					
		    <li><a href="#four"><em>02</em>حذف  حساب کاربری</a></li>

	            <li><a href="#four"><em>03</em>غیر فعال سازی حساب</a></li>

		   </ul>

		</li>
		
   </ul>

ما از یک کلاس کلی به نام accordion برای تمامی منو ها استفاده کرده ایم و سپس در داخل تگ li برای منوهای خود زیر منو اضافه کرده و دوباره با استفاده از یک لیست نامرتب دیگری که دارای کلاس sub-menu است اطلاعات مورد نیاز برای نمایش در منو ها را وارد کرده ایم.

اگر پیش نمایش را مشاهده کرده باشید متوجه خواهید شد که ما در کنار هر عنوان منو از یک آیکون خاصی استفاده کرده ایم،ما برای نمایش آنها از انتخابگر before: استفاده کرده ایم.

CSS

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

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
    text-align: right;
    direction: rtl;
}

.accordion li {
	list-style: none;
}

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

.accordion li > a {
	display: block;
	position: relative;
	min-width: 110px;
	padding: 0 40px 0 10px;
	height: 32px;

	color: #fdfdfd;
	font: bold 12px/32px arial, sans-serif;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);

	background: #6c6e74;
	background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
	background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

ما برای استایل مربوط به spanها که شامل تعدادی عدد هستند از کدها زیر استفاده خواهیم کرد که شامل کمی سایه،گردی و … است.

.accordion li > a span {
	display: block;
	position: absolute;
	top: 7px;
	left: 0;
	padding: 0 10px;
	margin-left: 10px;
	
	font: normal bold 12px/18px arial, sans-serif;
	background: #404247;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
	box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

ما برای نمایش آیکون ها ی مورد نیاز همانطور که قبلا نیز به آن اشاره کردیم از خاصیت before: استفاده می کنیم.استایل مربوط به آیکون ها  را برایتان می آوریم.

.accordion > li > a:before {
	position: absolute;
	top: 0;
	right: 0;
	content: '';
	width: 24px;
	height: 24px;
	margin: 4px 8px;

	background-repeat: no-repeat;
	background-image: url(../img/icons.png);
	background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24px; }

ما برای استایل مربوط به زیو منوها(sub menu) نیز به همین روش عمل خواهیم کرد و فقط رنگ  و سایه و… را تغییر خواهیم داد.

.sub-menu li a {
	color: #797979;
    padding-right: 35px;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);

	background: #e5e5e5;
	border-bottom: 1px solid #c9c9c9;

	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: transparent;
	border: 1px solid #c9c9c9;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.sub-menu em {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 14px;
	color: #a6a6a6;
	font: normal 10px/32px arial, sans-serif;
    
}

استایل مربوط به قرار گیری موس بر روی منوها(hover) و همچنین نمایش فعال بودن(active) آنها در زیر قرار دارد.

.accordion > li:hover > a,
.accordion > li:target > a {
	color: #3e5706;
	text-shadow: 1px 1px 1px rgba(255,255,255, .2);
	
	/*background: url(../img/active.png) repeat-x;*/
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);	
}
.accordion > li:hover > a span,
.accordion > li:target > a span {
 color: #fdfdfd;
 text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 background: #3e5706;
}
.sub-menu li:hover a { background: #efefef; }

در نهایت ما برای نمایش و مخفی کردن زیر منو ها(sub menu) در ابتدا مقدار ارتفاع را برابر با ۰ قرار می دهیم و سپس با استفاده از جابجایی(transition) آنها را برای کاربرا نمایش می دهیم.تکه کد مبوط به این عمل در زیر قرار دارد.

.accordion li > .sub-menu {
	height: 0;
	overflow: hidden;

	-webkit-transition: height .2s ease-in-out;
	-moz-transition: height .2s ease-in-out;
	-o-transition: height .2s ease-in-out;
	-ms-transition: height .2s ease-in-out;
	transition: height .2s ease-in-out;
}

.accordion li:target > .sub-menu {
	height: 98px;
}

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

یک دیدگاه

  1. سلام

    برای سایت های ریسپانسیو وقتی قراره تو موبایل نمایش داده بشه باه صورت خوبی در نمیاد! چطوری میشه قالبشو برای موبایل طوری درست کرد که تو سایت اصلی مشکلی پیش نیاد؟؟؟

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


5 − سه =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>