Saadمدير عام ومنشئ المنتدى
- الجنس :
عدد الرسائل : 1642
تاريخ التسجيل : 02/10/2008
بطاقة الشخصية
المهنة: 
كود واجهة للمنتديات احترافية HTML
الثلاثاء فبراير 11, 2020 2:51 am
كود واجهة منتدى مع ازرار تصفح جميلة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- الكود:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>منتديات الغروب</title>
<div class="head">
<h1>
منتديات الغروب
</h1>
</div>
<div class="nav">
<ul class="main-menu">
<li>
Home
</li>
<li>
Course
<ul class="sub-menu">
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JAVASCRIPT
</li>
<li>
JQUERY
</li>
<li>
BOOTSTRAP
</li>
</ul>
</li>
<li>
Videos
<ul class="sub-menu">
<li>
C
</li>
<li>
C++
</li>
<li>
JAVA
</li>
<li>
PYTHON
</li>
<li>
RUBY
</li>
</ul>
</li>
<li>
About us
</li>
<li>
Contact
</li>
</ul>
</div>
<style type="text/css">
body{
background:#ccc;
}
*{
padding: 0px;
margin: 0px;
}
.head{
background: white;
color: RGB(225,66,0);
padding: 10px 70px;
font-family: sans-serif;
font-size: 30px;
border-top:10px solid #37f;
}
.nav{
padding: 10px 0px;
background: #37f;
text-align: center;
}
.main-menu>li{
display: inline-block;
width: 150px;
padding: 10px 0px;
margin-left: 10px;
text-align: center;
color: white;
font-size: 20px;
border-left: 1px solid white;
transition: .4s;
cursor: pointer;
box-sizing: border-box;
}
.main-menu li:hover .sub-menu{
display: block;
}
.sub-menu{
display: none;
position: absolute;
padding: 0px;
margin-top: 30px;
margin-left: -10px;
float: left;
width: 300px;
text-align: left;
box-sizing: border-box;
border: 5px solid white;
box-shadow: 1px 1px 1px grey;
}
.sub-menu:before{
content:"";
width: 0px;
height:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:30px solid white;
position: absolute;
margin:-30px 0px 0px 60px;
}
.sub-menu li{
list-style-type: none;
padding: 10px;
color: white;
font-size: 20px;
background: #37f;
}
.main-menu>li:hover, .sub-menu>li:hover{
background: #35c;
}
</style>
kariaka3977عضو مشارك
- الجنس :
عدد الرسائل : 28
تاريخ التسجيل : 31/08/2009
_da3m_12
الجمعة فبراير 28, 2020 9:38 pm
موضوع رائع بوركت
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى