اخر التدوينات

السبت، 22 مارس 2014

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



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

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

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




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

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

في امان الله
حصريا قائمة احترافية لمدونات بلوجر
  • العنوان : حصريا قائمة احترافية لمدونات بلوجر
  • الكاتب :
  • الوقت : 8:46 ص
  • القسم:

شاهد ايضا

  • Blogger Comments
  • Facebook Comments

0 التعليقات:

إرسال تعليق

Top