منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
»  طلب الكود
اليوم في 2:11 من طرف كمال92

» طلب سلايد بسيط*
اليوم في 0:45 من طرف 0marp0p23

» مشكلة
أمس في 23:37 من طرف 0marp0p23

» جعل المنتدى بطيء!!
أمس في 22:27 من طرف عبد المجيد الذكي

» اعلاني مخالف
أمس في 22:21 من طرف ahd allah

» مشكله في الرتب
أمس في 18:09 من طرف zaydoon

» ايكونه محذوفه اسفل التعليق ..
أمس في 14:59 من طرف zaydoon

» ربط المنتدى بالمدونة
أمس في 11:16 من طرف ahd allah

» شفرة اعلان فى نسجة الجوال
الإثنين 26 سبتمبر 2016 - 18:30 من طرف zeewab

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri

مُساهمة من طرف moslimmasri في الأربعاء 22 مايو 2013 - 23:53

السلام عليكم
أقدم لكم كود HTML لعمل نافبار جميل جدا بدون تومبلايت ..
مثال للكود

الرمز:


<div
 style="position: fixed; top: 0px; right: 0px; background: black; width:
 100%; color: #ECECEC; padding: 3px; z-index: 999;"> <div
id='cssmenu'>
<ul>
  <li class='active '><a href='your home'><span>الرئيسية</span></a></li>
  <li class='active '><a href='your forum'><span>المنتدى</span></a></li>
 
<li class='active '><a
href='your khas'><span>الرسائل
الخاصة</span></a></li>
  <li class='active has-sub '><a href='#'><span>روابط مهمة</span></a>
      <ul>
 
     <li class='active '><a
href='your a2daa'><span>قائمة
الاعضاء</span></a></li>
        <li
class='active '><a
href='your shakhsea'><span>البيانات
 الشخصية</span></a></li>
        <li><a href='your raf2'><span>مركز الرفع</span></a></li>
 
     <li><a
href='your blog'><span>المدونة</span></a></li>
      <li><a
href='your groups'><span>المجموعات</span></a></li>

      </ul>
  </li>
 
<li><a
href='your search'><span>ما
 الجديد ؟</span></a></li>
  <li><a
href='your mawade2'><span>مواضيع
 لم يتم الرد عليها</span></a></li>

</ul>
</div>
</div>
<Style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
text-align: right;
font-weight: bold;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #e00f16;
text-align: right;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
text-align: right;

}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
text-align: right;

}
#cssmenu ul {
  list-style: none;
text-align: right;

}
#cssmenu > ul {
  float: right;
text-align: right;

}
#cssmenu > ul > li {
  float: right;
text-align: right;

}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
text-align: right;

}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
text-align: right;

}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
text-align: right;

}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
text-align: right;

}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
text-align: right;

}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
text-align: right;

  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
text-align: right;

}
/* code brogramed by www.4egy.net*/
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
text-align: right;

}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
text-align: right;

}
</style>




طريقة وضع الكود

لو كنت مفعل التومبيلات
تضعه فى الهيدر بعد هذه الكلمة
{JAVASCRIPT}

أما لو كنت غير مفعل التومبيلات فأفضل مكان له الاعلانات الخاصة ليظهر فى جميع الصفحات او العناصر المستقلة لو كنت مفعلها

والآن مع الشرح :
بدلا من كلمة :
your home
أكتب رابط الصفحة الرئيسية في المنتدي ..

وبدلا من كلمة :
your forum
تضع رابط منتداك وليس الرئيسية ..

وبدلا من كلمة :
your khas
ضع رابط الرسائل الخاصة والذي يكون مثل هذا :
http://www.yourdomain/privmsg?folder=inbox
وبدلا من
yourdomain
أكتب ضومين منتداك ..

وبدلا من كلمة :
#
أكتب روابط مهمة وده إختياري وأفضل تسيبها ..

وبدلا من كلمة :
your a2daa
أكتب رابط قائمة الأعضاء والتي مثل هذا الرابط :
http://www.yourdomain/memberlist
وبدلا من كلمة
yourdomain
أكتب ضومين منتداك ..

وبدلا من كلمة :
your shakhsea
أكتب رابط البيانات الشخصية والذي مثل هذا :
http://www.yourdomain/profile?mode=editprofile
وبدلا من كلمة :
yourdomain
أكتب ضومين منتداك ..

وبدلا من كلمة :
your raf2
أكتب رابط مركز الرفع الخاص بك إذا كان لديك مركز رفع ..

وبدلا من كلمة :
your blog
أكتب رابط مدونتك إذا كان عندك مدونة ..

وبدلا من كلمة :
your groups
أكتب رابط المجموعات والذي مثل هذا :
http://www.yourdomain/groups
بدلا من كلمة :
yourdomain
أكتب ضومين منتداك ..

وبدلا من كلمة :
your search
أكتب رابط صفحة ما الجديد ..

وبدلا من الكلمة :
your mawade2
أكتب رابط مواضيع لم يتم الرد عليها مثل الذي علي هذا الرابط :
http://www.yourdomain/search.forum?search_id=unanswered
وبدلا من كلمة :
yourdomain
أكتب ضومين منتداك ..

والأشياء إل هي مش عندك أو أنت ما تعرفهاش عادي مش لازم تعملها ..
تحياتييييييي
الشرح تم بواسطة : MoslimMasri
يمنع النقل دون ذكر المصدر
وإذا نقل أحد الكود دون ذكر المصدر أولا لن أسامحه ..
ثانيا سأشكوه لمنتدي الدعم وهم يقبلون الشكاوي خاصة في تلك المواضيع ..

بالتوفيق ..

تم تجديد الصور بواسطة : Dr Godaddy


عدل سابقا من قبل (GeNeRaL) في الخميس 23 أبريل 2015 - 12:55 عدل 1 مرات (السبب : تجديد الصور)

moslimmasri
 
 

ذكر
عدد المساهمات : 918
معدل النشاط : 2480

http://islamy4u.forumslife.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى