الرئيسية » » حصريا قائمة احترافية لمدونات بلوجر

حصريا قائمة احترافية لمدونات بلوجر

Written By Unknown on السبت، 22 مارس 2014 | 8:46 ص



السلام عليكم ورحمة الله وبركاته

اليوم حبيت اقدم لكم قائمة احترافية وانيقة وبسيطة لمدونات بلوجر

لمعاينة القائمة




كود الـ 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%;
  }
}

اتمنى ان تنال اعجابكم وتستفيدو من القائمة

في امان الله
شارك الموضوع :

إرسال تعليق