هذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداك • الرجوع الى صفحة بيانات التصميم
كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri
صفحة 1 من اصل 1
كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri
السلام عليكم
أقدم لكم كود HTML لعمل نافبار جميل جدا بدون تومبلايت ..
مثال للكود
![كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri Hs00h0](https://2img.net/h/oi59.tinypic.com/hs00h0.png)
طريقة وضع الكود
لو كنت مفعل التومبيلات
تضعه فى الهيدر بعد هذه الكلمة
{JAVASCRIPT}
أما لو كنت غير مفعل التومبيلات فأفضل مكان له الاعلانات الخاصة ليظهر فى جميع الصفحات او العناصر المستقلة لو كنت مفعلها
والآن مع الشرح :
بدلا من كلمة :
وبدلا من كلمة :
وبدلا من كلمة :
http://www.yourdomain/privmsg?folder=inbox
وبدلا من
وبدلا من كلمة :
وبدلا من كلمة :
http://www.yourdomain/memberlist
وبدلا من كلمة
وبدلا من كلمة :
http://www.yourdomain/profile?mode=editprofile
وبدلا من كلمة :
وبدلا من كلمة :
وبدلا من كلمة :
وبدلا من كلمة :
http://www.yourdomain/groups
بدلا من كلمة :
وبدلا من كلمة :
وبدلا من الكلمة :
http://www.yourdomain/search.forum?search_id=unanswered
وبدلا من كلمة :
والأشياء إل هي مش عندك أو أنت ما تعرفهاش عادي مش لازم تعملها ..
تحياتييييييي
الشرح تم بواسطة : MoslimMasri
يمنع النقل دون ذكر المصدر
وإذا نقل أحد الكود دون ذكر المصدر أولا لن أسامحه ..
ثانيا سأشكوه لمنتدي الدعم وهم يقبلون الشكاوي خاصة في تلك المواضيع ..
بالتوفيق ..
أقدم لكم كود HTML لعمل نافبار جميل جدا بدون تومبلايت ..
مثال للكود
![كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri Hs00h0](https://2img.net/h/oi59.tinypic.com/hs00h0.png)
- الكود:
<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 مرات (السبب : تجديد الصور)
![-](https://2img.net/i/empty.gif)
» حصريا كود css لعمل عبارة "لا تضع أبداً ايميل ..الخ" بدون تومبلايت
» كود نافبار تومبلايت
» كود نافبار تومبلايت
» [css] لعمل تاثير جميل على ارقام صفحات في المواضيع
» كود المصدر بدون تومبلايت
» كود نافبار تومبلايت
» كود نافبار تومبلايت
» [css] لعمل تاثير جميل على ارقام صفحات في المواضيع
» كود المصدر بدون تومبلايت
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى