قائمة منسدلة احترافية بتأثيرات Ajax و jQuery

قائمة منسدلة احترافية بتأثيرات  Ajax و jQuery

حصريا على مدونة احتراف عربي

قائمة منسدلة احترافية بتأثيرات  Ajax و jQuery مع خاصية عرض صور و عناوين للمواضيع

معاينة القائمة

الأكواد الخاصة بلإضافة

كود HTML يوضع في المكان المخصص للقائمة أي في الهيدر "أو مكان القائمة المستبدلة"

 <ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">منسدلة 1</a>
<ul>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
</ul>
</li>
<li>
<a href="#">منسدلة2</a>
<ul>
<li><a href="#">فرعيةl</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
</ul>
</li>
<li>
<a href="#">منسدلة3</a>
<ul>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
<li><a href="#">فرعية</a></li>
</ul>
</li>
<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'>Search form is empty!
</li>    
</ul>
<div class='clear'/>    
</ul>
<div class='clear'/> 

كود  CSS يوضع عادةً فوق/قبل الوسم   ]]></b:skin>

.admenus * {
    text-align:right;
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:15px;
font-weight:400;
text-transform:uppercase;
}

ul.admenus li a {
display:block;
line-height:50px;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-family:Electrolize,ge_ss_threeregular;
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;
font-family:Electrolize,ge_ss_threeregular;
}

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

ul.admenus ul ul {
display:none;
right: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;
left:10px;
top:15px;
width:100px;
height:70px;
overflow:hidden;
font-size:0;
line-height:0;
border:1px solid #929292;
}

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-family:Electrolize,ge_ss_threeregular;;
font-size:12px;
transition:all 0.3s ease-in-out;
}

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

ul.adajaxmenu .loader {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrtq0hdr3hJmOGvQlzv5R8Sme3kI39TXopmGR3df_YEM-4ntLeb4_HrZI8LrsC6jRYiV-1U-37TO0Tkz2OmbM_vexxnFYzfITacRMI557QpJWHGIoaCPwWpnvyHDhNrHp40vyBsqDbYsX/s1600/adloading.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position:absolute;
top:50%;
margin-top:-11px;
left: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;    
}

li.search-form{
float:left!important;   
line-height:50px; 
margin:0 20px 0 0;    
}
li.search-form .searchbar{
font-family:Electrolize,ge_ss_threeregular;
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;
font-family:Electrolize,ge_ss_threeregular;
cursor:pointer;
padding:10px 5px;  
transition:all 0.3s ease-in-out;    
}
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/AVvXsEgFXVQuPgYSSLUjtVa3Fc-SjRdvun3LOecF8palvGDRnEWHESXyR-sD4_M_7aA2vOfOlDOwpZWves17G9lqQHc0QQTjodC0WEfKHEyXnwtLKl_y-Xufnw4Q9JxCA3MLarXi01ivD9Qb_HqD/s1600/Indicate.png) no-repeat;
background-position:10px;
border-radius:5px;
text-transform:lowercase;
} 

كود   jQuery يوضع فوق / قبل الوسم  </body>

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

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
}); 

4 هو العدد الأقصى لعرض المواضيع

كود Javascript يوضع فوق/قبل الوسم  </head>

 <script src="https://arlina-design.googlecode.com/svn/Ajaxmenu.js" type="text/javascript">

الخطوط المستخدمة في الإضافة " إذا كانت لديك لا داعي لإضافتها"
توضع فوق/قبل الوسم  </head>

 <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize' rel='stylesheet' type='text/css'/>
<link href='http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

إذا كان لديك أي استفسار باب التعليقات مفتوح للجميع