بسم الله الرحمن الرحيم
اليوم اقدم لكم أروع نافبار سوف تشاهده ان شاء الله
وما يتميز هذا النافبار
ZAnavbar
- خالية من الأخطاء تماماً
- مبرمجة بتقنيات Jquery + css3
- يحتوي على ميزات كبيرة و جميلة جدا
- يوجد وصف لكل زر مع الصورة
,,المثال،،
بالصورة
بالمثال الحي
لا يوجد
,,الشرح طريقة،،
ارفع ملف ZAnavbar الموجود في ملف الصور الى ملف صور منتداك الرئيسي وهي images
ارفع ما بداخل ملفات الجيكوري الى ملف منتداك الرئيسي
ضع هذا الكود code في بداية الهيدر header
رمز Code:
<div id="menu-wrapper"> <ul class="menu"> <li> <a href="#">رابط</a> </li> <li> <a href="#">رابط</a> </li> <li> <a href="#">رابط</a> </li> <li> <a href="#">رابط</a> </li> </ul> </div> <div id="submenu-wrapper"> <ul class="submenu"> <li> <a href="#"> <img src="images/ZAnavbar/9.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/10.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/11.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/12.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> </ul> <ul class="submenu"> <li> <a href="#"> <img src="images/ZAnavbar/13.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/14.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/15.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/16.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> </ul> <ul class="submenu"> <li> <a href="#"> <img src="images/ZAnavbar/5.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/6.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/7.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/8.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> </ul> <ul class="submenu"> <li> <a href="#"> <img src="images/ZAnavbar/1.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/2.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/3.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> <li> <a href="#"> <img src="images/ZAnavbar/4.jpg" /> هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية </a> </li> </ul> </div> <script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.7.1.min.js"%3E%3C/script%3E'))</script> <script type="text/javascript" src="demo.js"></script>
وضع هذا الكود code في جي اس اس الاضافي لاستايل style منتداك
رمز Code:
@import url(http://fonts.googleapis.com/css?family=Pontano+Sans|Poiret+One); #menu-wrapper { position: relative; display: block; z-index: 2; height: 60px; background-image: -webkit-gradient(linear, right top, right bottom, from(#535557), to(#333532)); background-image: -webkit-linear-gradient(top, #535557, #333532); background-image: -moz-linear-gradient(top, #535557, #333532); background-image: -ms-linear-gradient(top, #535557, #333532); background-image: -o-linear-gradient(top, #535557, #333532); background-image: linear-gradient(to bottom, #535557, #333532); font-family: "Pontano Sans"; font-size: 15px; color: #fff; text-align: center; } .menu { display: block; margin: 0 auto; padding: 0; width: 870px; text-align: right; list-style-type: none; } .menu li { display: inline-block; padding: 16px 10px 25px 10px; cursor: pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .menu li:hover, .selected { background: #212525; } .menu a, .menu a:visited { color: #fff; text-decoration: none; } #submenu-wrapper { position: absolute; right: 0; right: 0; display: block; z-index: 1; width: 850px; height: 130px; margin: -12em auto 0; padding: 10px 10px; background: rgba(33,37,37,0.9); font-family: "Pontano Sans"; font-size: 13px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0px 2px 7px rgba(0,0,0,0.5); overflow: hidden; } .submenu { display: block; margin: 0 0 1.5em; padding: 0; list-style-type: none; } .submenu li { display: inline-block; width: 210px; vertical-align: top; text-align: center; } .submenu li img { display: block; margin: 0 auto 1em; width: 200px; border-radius: 5px; border: 0; } .submenu li a, .submenu li a:visited { color: #fff; text-decoration: none; } #title { display: block; margin-top: 4em; font-family: "Poiret One"; font-size: 45px; color: #fff; } #title a, #title a:visited { font-size: 20px; text-decoration: none; color: #fff; }
,,التحميل،،
اضغط هنا :d
انتهى بحمدلله ..
اتمنى اني وفقت في شرح طريقة التاثير واضافتها
وأي استفسار أو مشكلة أو اقتراح
يرجى كتابتها في هذا الموضوع أو مراسلتي عبر الايميل الموجود في التوقيع
ظ…ظٹط² ظ…ظ†طھط¯ط§ظƒ ط¨ط£ط±ظˆط¹ ظ†ط§ظپط¨ط§ط± ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚ ( ظ†ط§ظپط¨ط§ط± ZAnavbar )
ZAnavbar.zip (1.06 ميقابايت, عدد مرات المشاهدة 169 مرة) [/TR]
رد مع اقتباس
