المشاركة رقم تم النشر فى :26 - 08 - 2020
.الصوره الشخصيه
.AWARDS
المدير العام
وسام الاداره
المدير العام
وسام المدير العام
وارث العطاء البادخ
شكر الاداره
وسام وارث سنابل العطاء
شكرا الاداره
وسام التقييم الحصري 150 تقييم
وسام الاداره الحصري
razan
موضوع: قائمه علويه تومبيلات
قائمه علويه تومبيلات
السلام عليكم ورحمة الله وبركاته اليوم اقدم لكم نافبار جميل او قائمة علوية بازرار منسدله بتقنية css الكود يضاف overall_header حيث تبحث عن وتضيف الكود اعلاه مباشرتا صورة للكود التومبيلات الكود: <div id='cssmenu'>[size=19][/size] <ul>[size=19][/size] <li><a href='#'><span>أضف عنوانا</span></a></li>[size=19][/size] <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>[size=19][/size] <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>[size=19][/size] <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>[size=19][/size] <li><a href='#' target='_blank'><span>اتصل بنا</span></a></li>[size=19][/size] <li class='#'><a href='#'><span>أقسام الموقع</span></a>[size=19][/size] <ul>[size=19][/size] <li><a href='#' target='_blank'><span>القسم 1</span></a></li>[size=19][/size] <li class='last'><a href='#' target='_blank'><span>القسم 2</span></a></li>[size=19][/size] </ul>[size=19][/size] </li>[size=19][/size] <li><a href='/' target='_blank'><span>المنتدى</span></a></li>[size=19][/size] <li class='last'><a href='#'><span>الموقع</span></a></li>[size=19][/size] </ul>[size=19][/size] </div>[size=19][/size] <style type="text/css">[size=19][/size] #cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:5px; } [size=19][/size] #cssmenu > ul {list-style:inside none; padding:0; margin:0;} [size=19][/size] #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} [size=19][/size] #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } [size=19][/size] #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} [size=19][/size] #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } [size=19][/size] #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} [size=19][/size] #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } [size=19][/size] #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} [size=19][/size] #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } [size=19][/size] #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} [size=19][/size] #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} [size=19][/size] #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } [size=19][/size] #cssmenu ul li > ul{width:200px;} [size=19][/size] #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} [size=19][/size] #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } [size=19][/size] [size=19][/size] #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top, #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top, #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } [size=19][/size] #cssmenu{border-color:#1b313d;} [size=19][/size] #cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;} [size=19][/size] #cssmenu > ul > li > a:after{border-color:#6696bd;} [size=19][/size] #cssmenu > ul > li > a:hover{background:#436f93;} [size=19][/size] [size=19][/size] </style> [size=19][/size] [size=19][/size] [size=19][/size]
أسم العضو : razan هل ترغب في التعليق على رسالة العضو razan ؟
الــرد الســـريـع
الاعضاء الدين شاركوا في الموضوع
تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
كود HTML معطلة
أعلي 10 إحصائياتأكثر الأقسام شعبية أفضل المواضيع افضل 10 اعضاء فى منتدى آخر المشاركات
تصميم احساس ديزاين للتصميم
الساعة الآن