بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله
العديد من أصحاب المواقع يتطرقون إلى مواضيع كثيرة مما يلزمهم الأمر القيام بعدة قوائم كالرئيسية وحلقات وبرامج وغيرها ، لهذا يواجهون مشاكل ككثرة القوائم ، اليوم سنتعرف على طريقة سهلة لإضافة بانر القوائم بشكل 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-إحفض الأذاة في المكان المناسب.
