قائمة أفقية جذابة باللون الازرق والسكني البارد مع حركة انيقة وفقط بإستخدام css+html بدون جافا يمكنك استخدامها لاقسام منتداك او موقعك

موقع جنتل الاردن هو عبارة عن فكرة بسيطة جدا مواضيع نطرحها نؤلف نترجم ونقتبس كل ذلك سبيلا في خدمة القارئ العربي
 
الرئيسيةس .و .جمكتبة الصوربحـثالتسجيلدخول

قائمة أفقية جذابة باللون الازرق والسكني البارد مع حركة انيقة وفقط بإستخدام css+html بدون جافا يمكنك استخدامها لاقسام منتداك او موقعك

الموضوع السابق الموضوع التاليمركز رفع الصور
Posted By

Moh'd S Hammoudeh


انشرالموضوع
الرد عن طريق الفيس بوك
الابلاغ عن الموضوع




مواقع صديقة
All Tricks And Tips
Entertainment
أضف موقعك هنا
أضف موقعك هنا


صفحات فيسبوكية رائعة
All Tricks And Tips
Entertainment
المحاسبين
موقع جنتل الاردن
أضف صفحتك هنا
أضف صفحتك هنا


صفحتنا الرسمية على الفيس بوك

صفحتنا الرسمية على تويتر



الأحد أغسطس 04, 2013 5:30 am ساندنا على الفيس بوك  ساندنا على اليوتيوب ساندنا على تويـــــــتر









السلام عليكم ورحمة الله ....

نقدم اليكم اليوم قائمة أفقية جذابة باللون الازرق والسكني البارد مع حركة انيقة وفقط بإستخدام css+html بدون جافا يمكنك استخدامها لاقسام منتداك او موقعك

مميزات القائمة 
-ذات مظهر مميز ولون جميل ويمكنك التحكم بالالوان
-عند المرور على القوائم تظهر حركة انيقة تزيد من جمالية منتداك او موقعك
-فقط css + html بدوون جافا
-تحتوي على عدد مناسب من القوائم ويمكنك زيادتها


الرمز:
<!-- Algantel.com -->


<div class="topbar"></div>
<ul class="claybricks">
<li><a href="http://www.algantel.com/forum">الرئيسية</a></li>
<li><a href="http://www.algantel.com/">بوابة الموقع</a></li>
<li><a href="http://www.algantel.com/style/">الدخول</a></li>

<li><a href="http://www.algantel.com/t4569-topic">اعلن معنا</a></li>
<li><a href="http://www.algantel.com/contact">اتصل بنا</a></li>
<li><a href="http://www.algantel.com/register">انظم الينا</a></li>
<li><a href="http://www.algantel.com/">احلى المنتديات</a></li>
<li><a href="http://www.algantel.com/">المنتدى الثقافي</a></li>


</ul>


<style type="text/css">

div.topbar{ /* bar that runs across the top of the menu */
height: 16px;
background: #8f8f8f;
}

ul.claybricks{ /* main menu UL */
font-weight: bold;
width: 90%;
background: #36a8ff;
padding: 6px 0 6px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: right; /* set value to "right", "center", or "left" to align menu accordingly */
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color:white;
padding: 6px 8px 4px 8px; /* padding of the 4 sides of each menu link */
margin-right: 20px; /* spacing between each menu link */
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected{
color: white;
background: #050100;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* moz syntax for CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px; /* large padding to get menu item to protrude upwards */
padding-bottom: 6px;
}

</style>


<!-- Algantel.com -->



ملاحظة : إذا اردت وضع الكود السابق في صفحة HTML , ولتفادي ظهور اللغة الغريبة ضع قبل الكود السابق الاتي


الرمز:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

وبالتوفيق للجميع مع تحيات موقع جنتل الاردن










جميع المواضيع و الردود تعبر عن رأي صاحبها ولا تعبر عن رأي إداره موقع جنتل الاردن بــتــاتــآ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

الموضوع السابق الموضوع التالي
صفحة 1 من اصل 1








جميع الحقوق محفوظة لبوابة جنتل الاردن © 2013