بنام خدا

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

                                                       

 

 

 

 

 

مرحله اول- قسمت css که به انتهای قالب css بلاگ خود (البته قبل از آخرین }  ) اضافه می شود.

 

@charset "utf-8";
/* CSS Document */
/*CopyRight.Mynote.blog.ir*/
 
/*--------accordion menu*/
@charset "utf-8";
/* CSS Document */
/*CopyRight.Mynote.blog.ir*/
 
#container {
width: 180px;
margin: 20px auto;
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
}
#accordion {
margin-top: 20px;
}
#accordion li.item {
width: 200px;
height: 30px; /* height = total height of A child element */
overflow: hidden;
 
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
 
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 
margin-bottom: 2px;
}
 
#accordion li.item {
width: 200px;
height: 30px; /* height = total height of A child element */
overflow: hidden;
 
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
 
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 
margin-bottom: 2px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
 
background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
 
}
#accordion a:hover {
background-color:#FF0;
}
#accordion ul {
height: 150px;
padding: 5px;
}
 
#accordion li.item:hover {
height: 250px; /* height = total height of A and P elements - be tetad zirmeno ha*/
 
}
#accordion li:hover a {
border-bottom: 1px solid #ccc;
font-weight:!important;
}
 
#accordion li ul.submenu {
/* Namayesh zir menu ha dar hover mouse roye titr meno asli*/
display: block;  /* Namayesh zir menu ha :block*/
 
padding:0;
 
}
#accordion ul.submenu li {
/*Vzeyat zir mrno haye baz shavande*/
 
display: block;
height:auto;
padding:0px;
border-right-color: rgb(113, 21, 21);
border-right-width: 5px;
border-right-style: solid;
position: relative;
text-decoration: none; 
 
}
#accordion ul.submenu li:hover a {
/*Vzeyat zir mrno haye baz shavande : dar hover mouse roye titr submenu */  
 border-right-color:#FF0;
 border-right-width: 0px;
 border-right-style: solid;
 border-left-width: 1px;
 border-top-width: 1px;
 border-bottomn-width: 1px;
 background-color:#FF0;
 
}
 
#accordion ul.submenu li{
display: block;
}
 
مرحله دوم- قسمت تغییر کرده کد نمایش منو که در جای دلخواه قرار می گیرد
 

 

 

 
    
     <box:categories>
<div class="mod_right">
<div class="title">منوهای بلاگ - طبقه بندی موضوعی</div>
<div class="cnt">  
 
  <div id="container">
<ul id="accordion">
 
<li class="home"><a href="http://mynote.blog.ir/">صفحه اول</a></li>
<view:categories>
<li class="item">
<check:if category_selected>
<span class="category_selected">
<a>(*category_name*)   ((*category_post_count*)مطلب) </a> 
 
</span>
</check:if>
<check:if not category_selected>
<a href="(*category_link*)">(*category_name*) ((*category_post_count*)مطلب) </a>
</check:if>
<check:if category_children>
<ul class="submenu">
<view:category_children></view:category_children>
 </ul>
 
</check:if>
</li>
</view:categories>
 
</ul>
</div>
 
</div>
</div>
</box:categories>

 

 

مرحله سوم- تصویر نمونه ذکر شده :