اهـــــــــــــــلا وسهلا بك عزيزي الزائر في منتدى اصدقاء طول العمر العراقي نتمنى لك اوقاتا ممتعة معنا وندعوك للانضمام الى منتدانا 
من طرف المدرس العراقي الأحد نوفمبر 08, 2015 8:24 pmاليوم سأعرض طريقة مختلفة للقوائم الرأسية بتقنية CSS وهى عبارة أيقونات رأسية ثابتة على يسار موقعك بمرور الماوس عليها يظهر إسم القسم أو الموضوع وبالضغط عليها تؤدى إلى رابط الموضوع أو القسم مثل الصفحة الرئيسية,الفهرس,اتصل بنا,.....وغير ذلك من الأقسام.
ولقد صممت نموذجين من هذه القوائم يمكن إختيار المناسب لمدونتك
يحتوى على الصفحة الرئيسية,لمحة عنى,أرشيف المدونة,آخر الأخبار,المواضيع الهامة
ولقد صممت نموذجين من هذه القوائم يمكن إختيار المناسب لمدونتك
يحتوى على الصفحة الرئيسية,لمحة عنى,أرشيف المدونة,آخر الأخبار,المواضيع الهامة
- الكود:
<style type="text/css"> #hor { list-style:none; padding:0; margin:0; } #hor li { float:left; padding:5px; } #hor a { display:block; height: 12px; text-indent:-999em; } #hor a.home { width:46px; background:url(vhome.gif ) no-repeat 0 0; } #hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0; } #hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0; } /* CSS Style for Vertical Menu */ #ver { list-style:none; padding:0; margin:0; } #ver li { padding:2px; } #ver li a { display:block; height:12px; text-indent:-999em; } #ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; } #ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; } #ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; } .clear { clear:both; } *{ /* A universal CSS reset */ margin:0; padding:0; } #navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat; /* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); font-family:Arial, Helvetica, sans-serif; } #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ background:url('https://lh6.googleusercontent.com/-bdMefpyZnxU/UI2p3ybFBKI/AAAAAAAADs8/Lp6CzfaLXBw/s190/navigation2.png') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 0px #FFFFFF; -webkit-box-shadow:0 0 0px #FFFFFF; box-shadow:0 0 0px #FFFFFF; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; color:#460f35; text-shadow:1px 1px 0 #d244a6; } </style> <div style='position: fixed; top: 40%; left: 2%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="رابط الصفحة الرئيسية"> <span>الصفحة الرئيسية</span> </a> </li> <li> <a class="about" href="رابط من نحن"> <span>من نحن؟</span> </a> </li> <li> <a class="services" href="رابط الأرشيف"> <span>الأرشيف</span> </a> </li> <li> <a class="portfolio" href="رابط الأخبار"> <span>الأخبار</span> </a> </li> <li> <a class="contact" href="رابط المواضيع الهامة"> <span>مواضيع هامة</span> </a> </li> </ul> </div><a href="http://anbarprograms.blogspot.com/" rel="nofollow" target="_blank"><small>Get The Fixed Menu Gadget</small></a>
» ملزمة الرياضيات الصف الثاني متوسط المنهج الجديد2018
» أيهما أصح : «تمنياتي لكم التوفيق» أو «أرجو لكم التوفيق»؟
» أيهما أصح : «تمنياتي لكم التوفيق» أو «أرجو لكم التوفيق»؟
» الرياضيات الصف الثاني متوسط المنهج الجديد 2017-2018
» ملزمة اللغة الانكليزية للصف السادس الابتدائي للعام الدراسي 2016-2017
» برنامج شهر عسل لمدة 9 ايام 8 ليالى فى ماليزيا
» اشخاص ادعى كل منهم بالنبوة
» افضل طريقة لحفظ تعاريف جهازك قبل الفورمات
» دورة الإستراتيجيات الحديثة للعلاقات العامة والإعلام
» دورة المنازعات القانونية الناشئة عن التعاملات المصرفية وطرق حلها
» اناشيد تحميل واستماع
» دورة إدارة العمليات المالية والتخطيط المالي المتقدم
» دورة النظم المتقدمة فى مراجعة الحسابات وتدقيق الميزانيات والقوائم المالية
» الخطة التدريبية للدورات في مجال المشتريات و المخازن
» الخطة التدريبية للدورات في مجال السكرتارية وإدارة المكاتب
» الخطة التدريبية للدورات في مجال الدفاع المدني
» الخطة التدريبية للدورات في مجال البيئة
» الدورات في مجال الهندسة الزراعية
» افضل عروض الفنادق فى ماليزيا , سياحة ماليزيا 2015, شهر العسل ماليزيا 2016
» عرض شهر عسل مميز أربع نجوم للمسافرون ماليزيا 2016
» الخطة التدريبية للدورات في مجال المالية و المحاسبة
» الخطة التدريبية للدورات في مجال المالية و المحاسبة
» دورة معايير المحاسبة الدولية و معايير التقارير المالية الدولية
» دورات في مجال الدفاع المدني لعام 2016
» غزوة مؤتة
» foto mix للتعديل على الصور
» مشغّل VLC Media Player 2.2.1
» تحميل اكبر مجموعة خطوط فوتوشوب عربي + انجليزي +5000
» ميكروسوفت أوفيس 2013 - Microsoft Office تنزيل مباشر
» الدورات في مجال الإحصاء
» الدورات في مجال المصارف و البورصات
» اناشيد دينية Islamic songs
» برنامج لتقطيع الفيديو اخر اصداركامل Ultra Video Splitter
» اضافات بلوجر
» اضافة الثلوج لمدونتك Add ice for your blog
» دورة التحليل فى نظم المعلومات الجغرافية
» دورات إدارة الجودة و الإنتاج لعام 2016
» الدورات في مجال الهندسة المدنية
» الدورات في مجال الموارد البشرية
» دورة ادارة المكاتب , التخطيط والتنظيم وتحديد الأهداف بكفاءة وفعالية
» دورة سيكلوجية الإتصال الفعال , التأثير , الاقناع واعداد وتنفيذ استراتيجية التفاوض
» اداة اختصار الروابط
» اداة اختصار الروابط
» دورة التحليل المالي وقوائم التدفقات النقدية
» دورة الأمن والسلامة فى المخاطر الكيميائية
» كتب الامام محمد عبدالوهاب
» استمع للقرأن بجودة عالية
» فوتوشوب اون لاين
» دورة التصوير والإضاءة التلفزيونيّة/الدراميّة/السينمائيّة