السلام عليكم ورحمة الله وبركاته
اليوم حبيت اقدم لكم قائمة احترافية وانيقة وبسيطة لمدونات بلوجر
لمعاينة القائمة
لمعاينة القائمة
كود الـ HTML
<nav>
<a id="tombolmenu" href="#">menu</a>
<ul class="menu">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">قائمة1</a></li>
<li><a href="#">قائمة2</a></li>
<li><a href="#">قائمة3</a></li>
<li><a href="#">قائمة4</a></li>
<li><a href="#">قائمة منسدلة</a>
<ul class="hidden">
<li><a href="#">منسدلة1</a></li>
<li><a href="#">منسدلة2</a></li>
<li><a href="#">منسدلة3</a></li>
<li><a href="#">منسدلة4</a></li>
</ul>
</li>
</ul>
</nav>
كود الـ css
nav {
font:15px 'DroidKufi-Regular', tahoma ,arial;
background-color:#313131;
}
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}
nav,
nav * {
display:block;
}
nav #tombolmenu {
display:none;
}
nav ul,
nav li {
padding:0;
margin:0;
list-style:none;
}
nav ul {
height:30px;
}
nav li {
float:right;
position:relative;
}
nav li a {
display:block;
padding:0 10px;
color:white;
text-decoration:none;
}
nav li:hover > a {
background-color:#1D8FC5;
}
nav li ul {
position:absolute;
background-color:black;
height:auto;
width:160px;
display:none;
}
nav li:hover ul.hidden {
display:block;
}
nav li li {
float:right;
}
@media only screen and (max-width:600px) {
nav #tombolmenu {
display:block;
padding:0 15px;
background-color:black;
text-decoration:none;
}
nav #tombolmenu.active {
background-color:#1D8FC5;
color:white;
}
nav ul {
height:auto;
display:none;
}
nav li {
float:right;
}
nav li ul {
width:100%;
}
}
اتمنى ان تنال اعجابكم وتستفيدو من القائمة
في امان الله
إرسال تعليق