إضافة القائمة المنسدلة بشكل إحترافي -بلوجر-

بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله 
العديد من أصحاب المواقع يتطرقون إلى مواضيع كثيرة مما يلزمهم الأمر القيام بعدة قوائم كالرئيسية وحلقات وبرامج وغيرها ، لهذا يواجهون مشاكل ككثرة القوائم ، اليوم سنتعرف على طريقة سهلة لإضافة بانر القوائم بشكل CSS3 نعم إنها طريقة إحترافية ـ
1-إذهب إلى التخطيط - إضافة أذاة -HTML/JavaScript ثم ضع فيه الكود التالي :

--------------------------------------------------------------

<!--MBL Animated CSS3 Multi Drop Down Menu For Blogger-->

<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>          

<nav id="mbl-menu-wrap">    

<ul id="mbl-menu">

<li><a href="URL-Here">Home</a></li>

<li>

<a href="URL-Here">Categories</a>

<ul>

<li>

<a href="URL-Here">CSS</a>

<ul>

<li><a href="URL-Here">Item 11</a></li>

<li><a href="URL-Here">Item 12</a></li>

<li><a href="URL-Here">Item 13</a></li>

<li><a href="URL-Here">Item 14</a></li>

</ul>

</li>

<li>

<a href="URL-Here">Graphic design</a>

<ul>

<li><a href="URL-Here">Item 21</a></li>

<li><a href="URL-Here">Item 22</a></li>

<li><a href="URL-Here">Item 23</a></li>

<li><a href="URL-Here">Item 24</a></li>

</ul>

</li>

<li>

<a href="URL-Here">Development tools</a>

<ul>

<li><a href="URL-Here">Item 31</a></li>

<li><a href="URL-Here">Item 32</a></li>

<li><a href="URL-Here">Item 33</a></li>

<li><a href="URL-Here">Item 34</a></li>

</ul>

</li>

<li>

<a href="URL-Here">Web design</a>

<ul>

<li><a href="URL-Here">Item 41</a></li>

<li><a href="URL-Here">Item 42</a></li>

<li><a href="URL-Here">Item 43</a></li>

<li><a href="URL-Here">Item 44</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="URL-Here">Work</a> 

<ul> 

<li><a href="URL-Here">Work1</a></li> 

<li><a href="URL-Here">Work2</a></li> 

<li><a href="URL-Here">Work3</a></li> 

<li><a href="URL-Here">Work4</a></li> 

            </ul> 

            </li> 

<li><a href="URL-Here">About</a></li>

<li><a href="URL-Here">Contact</a></li>                                                                                                                               <li><a href="http://www.mybloggerlab.com">MyBloggerLab</a>                                                    </li> </ul>

                                                                                                                                           </nav>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

    $(function() {

if ($.browser.msie && $.browser.version.substr(0,1)<7)

{

$('li').has('ul').mouseover(function(){

$(this).children('ul').css('visibility','visible');

}).mouseout(function(){

$(this).children('ul').css('visibility','hidden');

})

}

/* Mobile */

$('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');

$("#mbl-menu-trigger").on("click", function(){

$("#menu").slideToggle();

});

// iPad

var isiPad = navigator.userAgent.match(/iPad/i) != null;

if (isiPad) $('#mbl-menu ul').addClass('no-transition');      

    });   

       

</script>

-----------------------------------------------------------------------------------------------

2-قم بتغيير (URL-Here) بالرابط الخاص، وقم بتغيير (work) 

3-إحفض الأذاة في المكان المناسب.

تصفح المزيد من المواضيع

Tweet

الكاتبمدون

عصام كعا ، مدون مغربي ، من مواليد 1995 ، طالب جامعي في كلية إبن زهر بأكادير ، المغرب ، مقدم مساعدات في مجال المعلوميات على حسابه الفيسبوك