ساخت منوی آکاردئونی با css

خانه » بلاگ » طراحی سایت » ساخت منوی آکاردئونی با css

 نحوه درست کردن منوی آکاردئونی با css

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

 

نحوه ی ایجاد منوی آکاردئونی با css

در مرحله­ ی اول ایجاد منوی آکاردئونی باید کد های html برای ساخت آیتم های اصلی منو نوشته شود. ابتدا باید یک فهرست توسط ul ایجاد کرد و آیتم های  اصلی منو  را داخل آن قرار داد. این آیتم ها باید در تگ li و داخل یک تگ a قرار گیرند. برای هر تگ li باید یک id متفاوت در نظر گرفت و همچنین قسمت href تگ a داخل li نیز باید آدرس آن با نام id تگ li یکسان باشد.

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

برای این کار باید از خصوصیت target استفاده کنیم. این خصوصیت زمانی استفاده می شود که لینکی وجود داشته باشد که به یک شناسه اشاره می کند. حال هنگامی که بر روی آن لینک کلیک می کنید , می توانید عناصر لینک مورد نظر را مشاهده کنید.

<ul>
<li  id=" webyar"> <a  href="# webyar "  title="">وب یار </a></li>
<li  id=" seoyar "> <a  href="# seoyar "  title=""> سئو یار</a></li>
<li  id=" forushgahsaz "> <a  href="# forushgahsaz " title="">فروشگاه ساز </a></li>
<li  id=" hostyar "> <a  href="# hostyar " title=""> هاست یار</a></li>
</ul>

تا اینجا آیتم های اصلی منو طراحی شده است. حال برای این که بتوانید زیر منو داشته باشید باید به هر یک از منو های اصلی که می خواهید یک بلاک از ul و li اضافه کنید. اما تگ های li به کار رفته برای زیر منو نیازی به شناسه ندارد . برای مثال می خواهیم به آیتم اصلی وب یار زیر منوی اضافه کنیم. به کد های زیر توجه کنید.

<ul>
<li  id=" webyar "> <a  href="# webyar "  title=""> وب یار </a>
<ul>
<li > <a  href="#"  title=""> طراحی سایت اصفهان</a></li>
<li > <a  href="#"   title="">  طراحی سایت </a></li>
<li> <a   href="#"  title="">سئو سایت</a></li>
<li> <a   href="#"  title="" > سئو سایت اصفهان  </a></li>
<li> <a   href="#"  title="" > طراحی فروشگاه اینترنتی </a></li>
<li> <a   href="#"   title=""> طراحی فروشگاه اینترنتی اصفهان </a></li>
</ul>	
</li>
</ul>

به همین ترتیب می توانید به سایر آیتم های اصلی منوی آکاردئونی نیز زیر منو اضافه کنید.

<div class="box_category">
<ul>
<li  id=" webyar "> <a  href="#webyar"  title="">وب یار</a>
<ul>
<li > <a   href="#"  title=""> طراحی سایت اصفهان</a></li>
<li > <a   href="#"  title="" > طراحی سایت </a></li>
<li> <a    href="#"  title="" >سئو سایت</a></li>
<li> <a    href="#"  title=""> سئو سایت اصفهان  </a></li>
<li> <a    href="#"  title="" > طراحی فروشگاه اینترنتی </a></li>
<li> <a    href="#"  title="" > طراحی فروشگاه اینترنتی اصفهان </a></li>
</ul>	
</li>
<li  id="seoyar"> <a  href="# seoyar "  title=""> سئو یار </a>
<ul>
<li> <a  href="#"  title=""> سئوسایت </a></li>
<li> <a  href="#"  title=""> سئوسایت اصفهان</a></li>	
<li> <a  href="#"  title=""> بهینه سازی سایت</a></li>	
<li> <a  href="#"  title=""> سئو گوگل</a></li>	
<li> <a  href="#"  title=""> سئوسایت خارجی </a></li>	
</ul>
</li>
<li  id=" forushgahsaz "><a  href="# forushgahsaz "> فروشگاه ساز </a>
<ul>
<li><a href="#" title=""> فروشگاه اینترنتی</a></li>
<li><a  href="#"  title=""> سایت فروشگاهی </a></li>	
<li><a  href="#"  title=""> طراحی فروشگاه اینترنتی</a></li>	
<li><a  href=""  title=""> طراحی فروشگاه اینترنتی اصفهان </a></li>			
</ul>
</li>
<li id=" hostyar "> <a href="# hostyar  " title=""> هاست یار</a>
<ul>
<li> <a  href="#"  title=""> هاست سایت </a></li>
<li> <a  href="#"  title=""> انواع هاست </a></li>	
<li> <a  href="#"  title=""> سرور – پهنای باند</a></li>			
</ul>
</li>	
</ul>
</div>

بعد از اتمام نوشتن کد های html منو نوبت به استایل دهی و تعریف کلاس های css می شود . تا این مرحله منو ها و زیر منو ها طراحی شده اند اما امکان باز شدن منوی آکاردئونی وجود ندارد زیرا نیاز به یک قطعه کد css داریم. به قطعه کد زیر توجه کنید.

قطعه کد اول زیر منو ها را مخفی می کند و قطعه کد دوم باعث می شود هنگامی که بر روی یک منو کلیک می کنید زیر منوی آن باز شود.

.box_category  ul  li  ul{ 
display:none;           
}

ul  li:target  ul{
dispalay:block;
}

ul  li  a{
 display: block;
}

کد کامل ساخت منوی آکاردئونی با css

کد های css زیر برای نمایش یک منوی آکاردئونی ساده می باشد. این کد ها صرفا برای نمونه می باشد و شما می توانید براساس نیاز خود این کدها را تغییر دهید.

.box_category{
width: 245px;     
background-color: #ffc107;
float:right;
}

.box_category  ul  li  ul   li:hover{
width: 245px;
background-color:#8bc34a;
}

.box_category  ul  li:hover{
background-color:#e6f16e;
width: 245px;
}

.box_category  ul  li  ul  li{
background:#fff;
width: 245px;
overflow: hidden;
border: none;
}

box_category  ul  li{ .  
color: #fff;
cursor: pointer;
text-align: right;
background-color:#ecf2ab ;
border-bottom: 1px solid #bdcea9;	
}

box_category  ul  li  ul  li  a{ .
font: 14px 'Yekan;
text-align: right;
margin: 0px 0px 0px 10px;
border: none;
color:#000;
}

.box_category ul li a{
font: 14px 'Yekan';
font-weight: bold;
display: block;
}

.box_category  ul  li  ul{ 
display:none;
}

.box_category ul li ul li a:hover{
margin-right: 5px;
}

.box_category  ul  li:target  ul{
display: block
position: relative;
}

.box_category  ul  li::before{
content:"\f0de";
font-size:20px;
color: #bdbdbd;
font-family: 'FontAwesome'
vertical-align: middle;
float: right;
margin: 8px 7px 0px 10px;   
}

.box_category  ul  li  ul  li::before{
font-family: 'FontAwesome';
content:"\f0d7";
display: inline-block;
vertical-align: middle;
margin: 8px 7px 0px 10px;
}

 

در این مطلب نحوه ساخت منوی آکاردئونی با css را با مثال واقعی برای تان ارائه کردیم،شما می توانید این کدها را در سایت خود وارد کنید و تغییرات مد نظرتان را روی آن اعمال کنید. امیدوارم برای شما مفید بوده باشد. برای دریافت آموزش های بیشتر می توانید به سایت وب یار (Webyar.net) مراجعه کنید.