الرئيسية اضافات بلوجر قائمة جانبية رأسية احترافية مصممة Html & Css

قائمة جانبية رأسية احترافية مصممة Html & Css

اليوم مع اضافة جديدة ومتناسقة وجميلة وهي قائمة جانبية رأسية أحترافية مصممه Html & Css , الاضافة بسيطة وجميلة وجذابة ومصممه بتقنية الفلات , الاضافة تصلح كقائمة لصفحاتك وأقسامك بشكل جميل وأحترافي .. ^_^

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

شرح تركيب الاضافة

أولا يجب أن نستدعي الخطوط المستخدمه في الاضافة , فقط ابحث عن </head> واضف قبلهم هذا الكود

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/earlyaccess/droidarabickufi.css");
//]]>
</script>

ثم نقوم بالبحث عن <body> ونضف بعده مباشرة هذا الكود

<div id='snav' class='en'><ul>
<li><a href='#'>الرئيسية</a></li>
</ul></div>
<div id='snav' class='en'>

<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>
<li>
<a href='#'>

موسيقي
</a>
</li>
<li>
<a href='#'>

اقتباس
</a>
</li>
<li>
<a href='#'>

RSS
</a>
</li>
<li>
<a href='#'>

HTML5
</a>
</li>
<li>
<a href='#'>

فديوهات
</a>
</li>
</ul>

</div>

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

#snav.en {
right: 0;
text-align: right;
}
#snav.en li span {
right: -100px;
}
#snav.en li a:hover span {
right: 35px;
}
/* main SideNav.css styles */
#snav {
position: fixed;
top:20%;
z-index: 9999;
font-size: 18px;
font-family: 'Droid Arabic Kufi', sans-serif;
}
#snav ul {
list-style: none;
}
#snav * {
margin: 0;
padding: 0;
outline: 0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#snav li a {
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
#snav .fa {
vertical-align: middle;
font-size: 18px;
width: 35px;
height: 37px;
line-height: 38px;
text-align: center;
position: relative;
z-index: 4;
}
#snav li span {
font-size: 15px;
vertical-align: middle;
height: 37px;
line-height: 35px;
width: auto;
white-space: nowrap;
overflow: hidden;
display: block;
padding: 0 15px;
position: absolute;
top: 0;
visibility: hidden;
z-index: 3;
}
#snav li a:hover .fa {
transform: rotate(720deg);
}
#snav li a:hover span {
visibility: visible;
}
/* colors styles 3aseq.blogspot.com */
/* menu items title background used for browsers not supporting :nth-child */
#snav li span {
background-color: #555;
}
/* icons color and background before hover */
#snav li .fa {
background-color: #EEE;
color: #555
}
/* icons hover color */
#snav li a:hover .fa {
color: #fff;
}
/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
background-color: #30555C;
}

وهكذا يكون مبروك عليك الاضافة ... الى اللقاء في تدوينة جديدة ^_^