قائمة جانبية تستعرض اهم صفحات الموقع رائعة

شارك الموضوع
Omar Shiriyani 2:08 م

مرحبا اصدقائي في تدوينة جديدة في صنف من مدة طويلة قد غبنا عنة وهو صنف تطوير المواقع. اثناء تصفحي لأحد المواقع رأيت قائمة رائعة وضعت للموقع تعرض اهم صفحات لدى الموقع مثل اتصل بنا والمؤسس والى أخره مثلما تشاهدون بصورة التالية..

طريقة تركيب :
ادخل مدونتك / ابحث عن ]]></b:skin>



/* by http://tech7yatak.blogspot.com/ */nav { background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png); width:210px; margin:20px;}nav ul { list-style:none; margin:0; padding:0; }nav ul li { /* Any child positioned absolutely will be positioned relative to this */ position:relative;}nav a { color:#e8e8e8; padding:12px 0px; /* Fill all available horizontal space */ display:block; /* Remove underline */ text-decoration:none; /*  New CSS3 animations: apply transition to background property, taking 1s to change it  */ transition:background 1s; -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; font-family:tahoma; font-size:13px; text-transform:uppercase; padding-left:20px;}nav a:hover { /*  RGBA background for transparancy:  last number(0.05) is the transparency  */ background: RGBA(255,255,255,0.05); color:#fff;}
nav ul li:hover ul { /* When list item is hovered, display UL nested within. */ display:block;}nav ul ul { /* Remove element from document flow */ position:absolute; /* Position relative to its parent &lt;li&gt; */ left:210px; top:0; border-top:1px solid #e9e9e9; display:none;}nav ul ul li { width:200px; background:#f1f1f1; border:1px solid #e9e9e9; border-top:0;}nav ul ul li a { color:#a8a8a8; font-size:12px; text-transform:none;}nav ul ul li a:hover { color:#929292;}


ثم قم بفتح اداة جافا سكربت وضع الكود التالي او وضع الكود في اي مكان مناسب داخل القالب


<nav><ul><li><a href="#"><span></span> الرئيسية </a></li><li> <a href="#"><span></span>عن الموقع </a><ul><li> <a href="#">القالب المستخدم </a></li><li> <a href="#">Our Staff </a></li><li> <a href="#">Our Promise </a></li><li> <a href="#">Ethics &amp; Legal </a></li><li> <a href="#">Future Goals </a></li> </ul> </li><li> <a href="#"><span></span>فريق العمل </a></li><li> <a href="#"><span></span>مؤسس الموقع </a></li><li> <a href="#"><span></span>أتصل بنا </a></li> <li> <a href="http://tech7yatak.blogspot.com/"><span></span>#التقنية_حياتك </a></li> </ul></nav>

وبتوفيق لكم ^^
مواضيع اخرى
اسم الكاتب