{newnavbar} حصرياً قالب نيو نافبار جديد كما في معهدنا

السلام عليكم

مرحباً بكم

أقدم لكم قالب NEWNAVBAR من برمجة وتكويد معهد مطوري الويب

صورة للكود

الكود:

كود هتمل 

الكود:

<div class="newnavbar" align="center">
   <ul>
      <li><a href="http://www.webdeve.gq/f5-montada">اكواد</a></li>
      <li><a href="http://www.webdeve.gq/f21-montada">أستيلات من تصميمنا</a></li>
      <li>
<a href="http://www.webdeve.gq/f22-montada">أستيلات محولة</a></li>
      <li><a href="http://www.webdeve.gq/c5-category">خدماتنا المجانية</a></li>

   </ul>
</div>

 كود css ضعه في ورقتة تصميم CSS

الكود:

/* navbar */
.newnavbar {
   width: auto;
   height: 100px;
}
.newnavbar ul {
   margin-right: 0%;
   padding: 3px;
   list-style-type: none;
   overflow: hidden;
}
.newnavbar ul li {
   height: 80px;
   margin: 0 10px 0 0;
   display: inline-block;
   -white-space: pre-line;
   width: 100px;
}
.newnavbar ul li a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px #f4f4f4;
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(1) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(127, 0, 255, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(2) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(255, 0, 128, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(3) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(0, 129, 255, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(4) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(0, 255, 126, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(5) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(129, 255, 0, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(6) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(243, 226, 12, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(7) a {
   display: block;
   background: url(http://www.alm6wer.com/vb/new-navbar/a1.png) no-repeat center -110px rgba(255, 126, 0, 0.3);
   color: #2c60a5;
   font: bold 13px 'Exo 2', 'Droid Arabic Kufi';
   width: 100px;
   padding: 50px 10px 0;
   border: #dfdfdf 1px solid;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   transition: .25s;
   -webkit-transition: .25s;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(1) a:hover {
   color: #fff;
   background: #7f00ff url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(2) a:hover {
   color: #fff;
   background: #ff0080 url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}

.newnavbar ul li:nth-child(3) a:hover {
   color: #fff;
   background: #0081ff url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(4) a:hover {
   color: #fff;
   background: #00ff7e url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(5) a:hover {
   color: #fff;
   background: #81ff00 url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(6) a:hover {
   color: #fff;
   background: #f3e20c url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}
.newnavbar ul li:nth-child(7) a:hover {
   color: #fff;
   background: #ff7e00 url('http://www.alm6wer.com/vb/new-navbar/a1.png') no-repeat center 10px;
   transition: .25s;
   -webkit-transition: .25s;
   border: #2c60a5 1px solid;
   text-decoration: none;
   border-bottom-left-radius: 20px;
   border-top-right-radius: 20px;
   border: 3px solid #fff;
   box-shadow: 0 1px 5px #999;
}

طريقة تركيب الكود::

الكود يضع في أي مكان يمكن في أسف قالب الهيدر ويمكن في خاصية أضف اعلان في الصفحة الرئيسة
وأي مكان يعجبك

الحقوق:

الكود من برمجة وتكويد معهد مطوري الويب  يمنع  منعاً باتاً نقل الموضوع بدون ذكر المصدر