0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 779
تاریخ بروزرسانی ۲۷ تیر ۱۳۹۸

 منوی آکاردئونی

منوی آکاردئونی به کاربران اجازه می دهد که یک طرح کلی از محتوای سایت را در یک نگاه مشاهده کنند. در پایان این آموزش شما می توانید یک منوی آکاردئونی ساده را فقط  با html و 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 زیر برای نمایش یک منوی آکاردئونی ساده می باشد. این کد ها صرفا برای نمونه می باشد و شما می توانید براساس نیاز خود این کدها را تغییر دهید.

.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;
}

 

منو آکاردئونی

از توجه شما بسیار سپاسگذاریم. برای دریافت آموزش های بیشتر می توانید به سایت وب یار (Webyar.net) مراجعه کنید.

 

مطالب مرتبط
دیدگاه ها

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *