قائمة جانبيه رأسيه مميزه html, css javascript access_time 09 يوليو remove_red_eye من أجمل القوائم الخفيفه والجميله التي تتوافق مع كل الشاشات للإضافه تابع الخطوات بالأسفل. 1-لوحة تحكم بلوجر 2- إضافة اداة HTML/javascript 3- أو يمكنك أن تأخذ الكود من هنا. 4- معاينة الإضافه من هنا. <div class="widget-content"> <style type="text/css"> #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; } </style><br /> <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><div id='snav' class='en'> <ul> <li><a href='#'><i class="fa fa-home"></i><span>الرئيسية</span></a></li> </ul> </div> <div id='snav' class='en'> <br /> <ul> <li><br /> <a href='#'><br /> <i class="fa fa-home"></i><br /> <span>الرئيسية</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-css3"></i><br /> <span>سي اس اس</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-camera"></i><br /> <span>صوري</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-circle-o-notch"></i><br /> <span>تحديث</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-envelope"></i><br /> <span>أتصل بنا</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-music"></i><br /> <span>موسيقي</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-quote-right"></i><br /> <span>اقتباس</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-rss"></i><br /> <span>RSS</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-html5"></i><br /> <span>HTML5</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-video-camera"></i><br /> <span>فديوهات</span><br /> </a><br /> </li> </ul> <br /> </div> <br /> <div id='snav' class='en'> <ul> <li><a href='#'><i class="fa fa-home"></i><span>الرئيسية</span></a></li> </ul> </div> <div id='snav' class='en'> <br /> <ul> <li><br /> <a href='#'><br /> <i class="fa fa-home"></i><br /> <span>الرئيسية</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-css3"></i><br /> <span>سي اس اس</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-camera"></i><br /> <span>صوري</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-circle-o-notch"></i><br /> <span>تحديث</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-envelope"></i><br /> <span>أتصل بنا</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-music"></i><br /> <span>موسيقي</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-quote-right"></i><br /> <span>اقتباس</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-rss"></i><br /> <span>RSS</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-html5"></i><br /> <span>HTML5</span><br /> </a><br /> </li> <li><br /> <a href='#'><br /> <i class="fa fa-video-camera"></i><br /> <span>فديوهات</span><br /> </a><br /> </li> </ul> <br /> </div> <br /> </div> لا تنسى أن تكون من أعضاء المدونه من هنا، إذا واجهتك أي مشكله لا تتردد فى ترك تعليق بالأسفل
1 تعليقات
السلام عليكم
ردحذف