قائمة احترافيه لعرض المواضيع حسب التسميات

قد عرضنا سابقا مجموعه قوائم احترافية قد اعجبت الكثير ، لكن القائمة التي سوف اقدمها لكم اليوم تختلف تماما،لانها تحتوي على خاصية عرض المواضيع في نفس القائمة حسب التسمية ايضا بشكل قائمة منسدله بالاضافه على انها خفيفه وتحتوي على مربع بحث بسيط،القائمة مبنيه على ملف ajax الاحترافي اي انها لا تحتوي على عيوب او سلبيات ،الان ننتقل الى شرح والمعاينة

• معاينة

شرح طريقة التركيب
1. انتقل الى تحرير القالب وابحث عن هذه الوسم ]]></b:skin> واضف فوقه/قبله الكود التالي

/*CSS menu qaisi1web*/
.admenus * {
margin:0;
padding:0;
}

ul.admenus {
list-style:none;
line-height:1;
overflow:visible!important;
}

ul.admenus:after {
margin:0;
padding:0;
content:' ';
display:block;
height:0px;
clear:both;
}

ul.admenus li {
float:right;
display:inline;
position:relative;
font-size:14px;
font-weight:400;
text-transform:uppercase;
}

ul.admenus li a {
display:block;
line-height:50px;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}

ul.admenus li a:hover,ul.admenus li a.hoverover {
background:#f54325;
color:#fff;
}

ul.admenus ul {
position:absolute;
display:none;
top:100%;
border:1px solid #ccc;
}

ul.admenus li:hover > ul {
display:block;
}

ul.admenus ul li {
z-index:72;
float:none;
min-width:160px;
background:#f5f5f5;
text-shadow:none;
}

ul.admenus ul li a {
text-transform:none;
font-weight:normal;
color:#aaa;
}

ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover {
background:#f54325;
}

ul.admenus ul ul {
display:none;
left:100%;
top:0;
}

ul.adajaxmenu li div.submenu {
position:absolute;
width:600px;
z-index:90;
right:0;
top:100%;
overflow:hidden;
min-height:150px;
background:#f0f0f0;
-moz-transform:translate(0,30px);
-webkit-transform:translate(0,30px);
-o-transform:translate(0,30px);
transform:translate(0,30px);
transform-origin:50% 0;
visibility:hidden;
opacity:0;
color:#929292;  
box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);    
transition:all 0.3s ease-in-out;
}

ul.adajaxmenu li:hover div.submenu {
visibility:visible;
opacity:1;
-moz-transform:translate(0,0);
-webkit-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}

ul.adajaxmenu ul ,ul.adajaxmenu ul li {
display:block!important;
border:0 none!important;
margin:0!important;
padding:0!important;
}

ul.adajaxmenu ul li {
background:none!important;
float:none!important;
}

ul.adajaxmenu ul.verticlemenu {
position:absolute;
width:33%;
right:0;
top:0;
bottom:0;
background:#202020;
}

ul.adajaxmenu ul.postslist {
position:relative;
display:block;
width:65%;
float:left;
margin:0 0 15px 0!important;
background:none;
}

ul.adajaxmenu ul.postslist li {
display:block;
overflow:hidden;
position:relative;
min-height:60px;
padding:15px 8px 15px 110px!important
}

ul.adajaxmenu ul.postslist li .imgCont {
position:absolute;
right:0;
top:15px;
width:100px;
height:70px;
overflow:hidden;
font-size:0;
line-height:0;
border:1px solid #929292;
margin-right: -10px;
}

ul.adajaxmenu ul.postslist li .imgCont img {
position:relative;
top:-20px;
padding:0;
width:100px;
height:100px;
display:block;
}

ul.adajaxmenu ul.postslist li a {
display:block;
line-height:1.4;
padding:0!important;
color:#666;
font-size:12px;
transition:all 0.3s ease-in-out;
text-align: right;
margin-right: 90px;
 font-weight: 700;
}

ul.adajaxmenu ul.postslist li a:hover {
color:#f54325;
background:transparent;
}

ul.adajaxmenu .loader {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo1J2Lt4BZj99KwXDpBapw20qfpQJqxvhS2-w81EYTM4kjdvfnF_xQVTIXoTdraMfqoDpLuie40KrQlo-U4m8IQ6XdOla0kdLzkNxe1aJJsSpjodPyvb2vHE-0hDz7ruCNgNvQy0wam8j-/s1600/adloading.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position:absolute;
top:50%;
margin-top:-11px;
right:5px;
}

ul.adajaxmenu .menuArrow {
border-bottom:4px solid transparent;
border-top:4px solid transparent;
border-right:4px solid #fff;
display:block;
height:0;
margin-top:-4px;
position:absolute;
left:11px;
top:50%;
width:0;
}

#adajaxmenu {
background:#fff;
height:50px;
width:100%;
position:relative;
border:1px solid #e6e6e6; 
max-width:980px;
margin:0 auto; 
padding:0 20px; 
direction: rtl;   
}

li.search-form{
float:left!important;   
line-height:50px; 
margin:0 20px 0 0;    
}
li.search-form .searchbar{
border:none;
padding:10px 5px;
background:#f9f9f9;
color:#fff;
width:130px;
}
li.search-form .searchbar:focus{
border:none;
outline:none;
background:#fafafa;    
color:#666;    
}
li.search-form .searchsubmit{
background:#f54325;
border:none;
color:#fff;
cursor:pointer;
padding:10px 5px;  
transition:all 0.3s ease-in-out;  
float: left;
margin-top: 7px;  
}
li.search-form .searchsubmit:hover{
opacity:0.9;    
}
.search-alert{
color:#f9f9f9;
padding:2px 15px 2px 40px;
display:none;
margin:5px;
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYijF2tOK48yxLmLpZkUzTi7fzOyuo1CunyVcK9MOEfnH4h8fA2stX0EVHbWfTBMmHA7WxVDu3rkUtUbTqhfnjo_WyzyxHbTDgniu5u-lE_m3CCmJhmX1J7B64nDy5ODuqEcGKNMcPAbH/s1600/Indicate.png) no-repeat;
background-position:10px;
border-radius:5px;
text-transform:lowercase;
}

2. ابحث عن </body> واضف فوقه/قبله الكود التالي

<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#adajaxmenu&#39;).ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : &#39;http://url-to-image.com/default-image.jpeg&#39; // Default thumbnail Image
 });
});

$(function(){
  $(&#39;.searchblog&#39;).submit(function(e){
    if($(&#39;.search-form .searchbar&#39;).val().length==0){
       $(&#39;.search-form .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>
<script src='//cdn.rawgit.com/assadalqaisi/qaisi1web/master/javmenu.js ' type='text/javascript'/>

3. اذا كان قالب مدونتك لا يحتوي على ملف jquery لن تعمل القائمة ويجب اضافه هذه الكود، لكن ان كانت تحتوي على ملف لا تضفه لانه قد يسبب مشاكل يضاف فوق </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'/>

5. والان المرحلة الاخيره قم باضافه هذه الكود في المكان الذي تريد اضافه القائمة في ويفضل ان يكون فوق المواضيع على الاغلب يكون الكود content-wrapper أو main-wrapper وضع الكود فوق/قبله

<ul class='admenus' id='adajaxmenu'>
    <li><a href='/'><i class='fa fa-home fa-lg'/></a></li>    
<li>
<a href='#'>قسم 1</a>
<ul>
<li><a href='http://qaisi1web.blogspot.com/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D9%88%D8%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA'>فرع 1</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/css'>فرع 2</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/Html5'>فرع 3</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/Jquery'>فرع 4</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>فرع 5</a></li>
</ul>
</li>
<li>
<a href='#'>قسم 2</a>
<ul>
<li><a href='http://qaisi1web.blogspot.com/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D9%88%D8%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA'>فرع1</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/css'>فرع 2</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/Html5'>فرع 3</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/Jquery'>فرع 4</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>فرع 5</a></li>
</ul>
</li>
<li>
<a href='#'>قسم 3</a>
<ul>
<li><a href='http://qaisi1web.blogspot.com/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D9%88%D8%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA'>فرع 1</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/css'>فرع 2</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/Html5'>فرع 3</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/Jquery'>فرع 4</a></li>
<li><a href='http://qaisi1web.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>فرع 5</a></li>
</ul>
</li>
<li><a href='#'>فرعي</a></li>
<li><a href='#'>فرعي</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='ابحث هنا . . .' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='ابحث'/>
</form>
  <p class='search-alert'>ابحث في هذه الموقع!</p>
</li>  
 
</ul>
<div class='clear'/>    
<div class='clear'/> 

*غير المحدد بالاحمر بروابط الاقسام الخاصه بك

مجددًا لو واجهتك مشكلة فباب التعليقات مفتوح لا تتردد! وادعمنا بمشاركة التدوينة 😻

قد عرضنا سابقا مجموعه قوائم احترافية قد اعجبت الكثير ، لكن القائمة التي سوف اقدمها لكم اليوم تختلف تماما،لانها تحتوي على خاصية عرض الم...