اقدم اليكم كود هيدر جديد ومميز للمنتديات و المواقع والمدونات برضو
بس الشرح رح يكون تركيبه لمنتديات احلى منتدى ! مميزات الهيدر
- يحتوي على اكثر من قائمة مسندلة قابلة للزيادة او النقصان
- يحتوي على على ايقونات التواصل الاجتماعي مع وجود hover للتجميل
- يبقى الهيدر في اعلى المتصفح مع نزول و صعود العضو في المنتدى لتسهيل عملية الوصول
طبعا الخلفية البرتقالية ليست جزء من الهيدر
الهيدر فقط الخلفية الرمادية بالروابط و الصور اللي عليه
لمشاهدة الروابط يلزمك التسجيل
للتركيب تفضلو الاكواد
اكواد الـ css تضعها في مكانها المخصص
ملف style.css او ورقة css في المنتديات
CODE
#top-menu {
background: url("http://elsa3a.com/templates/elsa3a/image/top-hed-bg.png") repeat-x scroll center bottom #212121;
height: 49px;
line-height: 49px;
min-width: 970px;
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
#top-menu .top-menu-cont {
width:970px;
margin: 0 auto;
}
#top-menu .top-menu-cont ul{
}
#top-menu .top-menu-cont ul li{
float:right;
position: relative;
margin-left: 22px;
}
#top-menu .top-menu-cont ul li span{
color:#fff;
}
#top-menu .top-menu-cont ul li span:hover{
color:#3aa1e2;
}
#top-menu .top-menu-cont ul li img{
vertical-align: middle;
}
#top-menu .top-menu-cont ul li a{
color:#fff;
display: block;
text-decoration:none;
}
#top-menu .top-menu-cont ul li a:hover{
color:#3aa1e2;
}
#top-menu .top-menu-cont ul li > ul{
background: #212121;
position: absolute;
border-radius: 5px;
right: 0;
width: 120px;
visibility: hidden;
top:40px;
transition: all 200ms;
z-index: 1;
opacity: 0;
}
#top-menu .top-menu-cont ul li:hover > ul{
visibility: visible;
top:49px;
opacity: 1;
}
#top-menu .top-menu-cont ul li > ul li{
width: 120px;
text-align: center;
height: 40px;
line-height: 40px;
transition: all 500ms;
}
#top-menu .top-menu-cont ul li > ul li:hover{
}
#top-menu .top-menu-cont ul li > ul li a{
display: inline-block;
color:#fff;
text-decoration:none;
}
#top-menu .top-menu-cont .social{
float:left;
margin-top: 10px;
margin-left:10px;
}
#top-menu .top-menu-cont .social a{
display: block;
width: 26px;
height: 26px;
float:left;
margin-right: 8px;
transition: all 800ms ease;
-moz-transition: all 800ms ease;
-webkit-transition: all 800ms ease;
-o-transition: all 800ms ease;
text-decoration: none;
}
#top-menu .top-menu-cont .social .face{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat;
}
#top-menu .top-menu-cont .social .face:hover{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat 0 -28px;
}
#top-menu .top-menu-cont .social .twitter{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -35px 0;
}
#top-menu .top-menu-cont .social .twitter:hover{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -35px -28px;
}
#top-menu .top-menu-cont .social .youtube{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -71px 0;
}
#top-menu .top-menu-cont .social .youtube:hover{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -71px -28px;
}
.contaner {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
margin: 0 auto;
position: relative;
top: 47px;
width: 970px;
padding-bottom: 64px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
.header-contaner{
background: url("https://i93.servimg.com/u/f93/15/47/21/99/bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0 auto;
position: relative;
top: 47px;
width: 970px;
}
.effect8
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
.effect8:before, .effect8:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
-moz-box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect8:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
.header-contaner #header{
height: 185px;
overflow: hidden;
}
.header-contaner #header #logo{
background: url("https://i93.servimg.com/u/f93/15/47/21/99/bg-log11.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
height: 185px;
margin-right: -22px;
text-align: center;
width: 456px;
}
.header-contaner #header #logo img{
margin-top: 38px;
}
.header-contaner #header #live{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/bg-liv10.png) no-repeat;
width:456px;
height:185px;
float:left;
text-align: center;
}
.header-contaner #header #live #colive{
margin: 26px auto 0;
width: 223px;
height:119px;
}
.header-contaner #header #live #colive h1{
float: left;
font-family: gess;
font-size: 20px;
font-weight: bold;
margin-top: 41px;
}
.header-contaner #header #live #colive a{
float: left;
font-family: gess;
font-size: 20px;
font-weight: bold;
margin-left: 26px;
margin-top: -39px;
text-decoration:none;
}
.header-contaner #header #live #colive .online{
color:#8fbe07;
}
.header-contaner #header #live #colive .offline{
color: #BD4216;
margin-left: 10px;
}
كود النافبار
CODE
<div id="top-menu">
<div class="top-menu-cont">
<ul>
<li><a href="http://inkor.yoo7.com" title="الرئيسية"><img src="https://i93.servimg.com/u/f93/15/47/21/99/home10.png" alt="المنتدى" title="المنتدى"></a></li>
<li><span>اقسام انكور</span>
<ul>
<li><a href="#" title="اعلانات واشعارات">اعلانات و اشعارات</a></li>
<li><a href="#" title="مسابقات انكور">مسابقات انكور</a></li>
</ul>
</li>
<li><span>قائمة مسندلة 2</span>
<ul>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
</ul>
</li>
<li><span>قائمة مسندلة 3</span>
<ul>
<li><a href="design.php" title="رابط نصي">رابط نصي</a></li>
<li><a href="t-design.php" title="رابط نصي">رابط نصي</a></li>
<li><a href="script.php" title="رابط نصي">رابط نصي</a></li>
<li><a href="logo.php" title="رابط نصي">رابط نصي</a></li>
</ul>
</li>
<li><span>قائمة مسندلة 4</span>
<ul>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
</ul>
</li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><span> قائمة مسندلة 5</span>
<ul>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" title="رابط نصي">رابط نصي</a></li>
</ul>
</li>
<li><a href="/contact" title="إتصل بنا">إتصل بنا</a></li>
</ul>
<div class="social">
<a class="face" href="https://www.facebook.com/" title="facebook"></a>
<a class="twitter" href="https://twitter.com/" title="twitter"></a>
<a class="youtube" href="#" title="rss"></a>
</div>
</div>
</div>
ومبروووك عليك الهيدر وللتعديل كل شئ واضح ان شاء الله
واي مساعدة يمكنك وضع موضوع في قسم لمشاهدة الروابط يلزمك التسجيل وسأساعدك ان شاء الله
جميع الحقوق محفوظة لشركة انكور التطويرية
يمنع نقل الموضوع من المنتدى بدون ذكر المصدر
ان شاء الله يكون عجبكم
بالتوفيق للجميع
والسلام ختام