درر العراق

مايكل · 7/August/2018

مرحبا

اليوم حبيت افيدكم بقائمة بسيطة تنفع للمواقع بنظام ويندوز
وكذلك القائمة فيها زر واحد عند تمرير الماوس عليه تظهر القائمة تدريجيا

القائمة طبقة ثانية وثابتة لذا لا تهتم لن تاخذ مساحة من موقعك

كود HTML:

<div id="mores" ><div class="div2"> <div id="des"> القائمة </div> <ul id="samo"> <li class="maikl" ><a href="">abut</a></li> <li class="maikl"><a href="">home</a></li> <li class="maikl"><a href="">mohmad</a></li> <li class="maikl"><a href="">abdalhosin</a></li> <li class="maikl"><a href="">mohnad</a></li> <li class="maikl"><a href="">mrtda</a></li> <li class="maikl"><a href="">abut</a></li> <li class="maikl"><a href="">home</a></li> </ul> </div> </div>

كود css

كود:

<style type="text/css">

#des{
  background: #777;
   padding: 2px; 
  color:#004340;
  width:30px;
  height:20px;
  margin-left: 150px;
  cursor: pointer;
  border: 2px solid #ccc;
  border-radius: 5px;
   z-index: 80;
}


#samo , .maikl a {
  color: #fff;
  text-decoration: none;
}


.div2{
  transition:width 3s;
  width: 80px;
  height: 100px;
  margin-left: -140px;
  z-index: 20;
  border: none;
}


.div2:hover{
   width: 50%;
}


.maikl, a:hover{
  padding: 0 20px;
  background-color: #008787;
}


#mores{
  overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}


#samo , .maikl {
   margin: 0;
   border-radius: 5px ;
   padding: 5px;
  display: inline-block;
  margin-left: 4px;
}




</style>

صور من القائمة:

ملاحظة // حقوق العمل لدرر العراق