هنا

[مايكل]

مرحبا



اليوم لدينا قائمة خفية للمشاريع الصغيرة وهي قائمة تظهر عند وضع الماوس عليها
وعند ابعاده تعود لتختفي ... في css , html فقط
للمواقع التي تتمتع بواجهة حاسوبية فقط

كود CSS

<style type="text/css">

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


ul li a {
  color: blue;
  text-decoration: none;
  
}


.div2{
  transition:width 3s;
  width: 80px;
  height: 60px;
  margin-left: -150px;
  z-index: 20;
}


.div2:hover{
   width: 50%;
}


ul li:hover{
  padding: 0 20px;
  background: #ccc;
  border: 2px dashed red;
}




ul li {
   margin: 0;
   border: 2px solid #087878;
   border-radius: 5px ;
   padding: 5px;
  display: inline-block;
  margin-left: 4px;
}





</style>

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


</div>

فيديو قصير لعمل القائمة:


وشكرا لقراءتكم

[مايكل]

نسيت رمضان كريم وكل عام وانتو بالف خير ... يارب

[Suzana]

ورمضان كريم عليك صديقنا ..شكرا جزيلا ع الموضوع

[ود 'ے]

عاشت ايدك