21‏/09‏/2014

أشارككم مع نهاية الأسبوع احد القوائم الإحترافية بتصميم Css أصلي قائمة متجاوبة في قمة الأناقة والخفة كنت أستعملها لنفسي في القالب السابق لمدونة عرب ويب، تحتوي القائمة على أيقونات FontAwsome والتي يسهل تغييرها وهذا موضوع خاص بها، تتوفر على قوائم منسدلة طفيفة مع محرك بحث خاص بها  ولكم الحرية بتصفحها بشكل مباشر، القائمة متوفرة بشكل عمودي وأفقي
أكواد القائمة العمودية


HTML
<nav>
  <ul class="mcd-menu">
   <li>
    <a href="">
     <i class="fa fa-home"></i>
     <strong>Home</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="" class="active">
     <i class="fa fa-edit"></i>
     <strong>About us</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-gift"></i>
     <strong>Features</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-globe"></i>
     <strong>News</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-comments-o"></i>
     <strong>Blog</strong>
     <small>what they say</small>
    </a>
    <ul>
     <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
     <li>
      <a href="#"><i class="fa fa-group"></i>Our Team</a>
      <ul>
       <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
       <li>
        <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
        <ul>
         <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
         <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
        </ul>
       </li>
       <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
      </ul>
     </li>
     <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
     <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
    </ul>
   </li>
   <li>
    <a href="">
     <i class="fa fa-picture-o"></i>
     <strong>Portfolio</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-envelope-o"></i>
     <strong>Contacts</strong>
     <small>drop a line</small>
    </a>
   </li>
   <li class="float">
    <a class="search">
     <input type="text" value="search ...">
     <button><i class="fa fa-search"></i></button>
    </a>
    <a href="" class="search-mobile">
     <i class="fa fa-search"></i>
    </a>
   </li>
  </ul>
 </nav>
Css
.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  
  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/
  
  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/
  
  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */
  
}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
  
  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*border-top: 4px solid #e67e22;*/
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;
  
  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/
  
  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
  
  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}  
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
  
  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
  
  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}


.search-mobile { 
 display:none !important;
 background:#e67e22;
 border-left:1px solid #e67e22;
 border-radius:0 3px 3px 0;
}
.search-mobile i { 
 color:#FFF; 
 margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .mcd-menu {
  margin-left:10px;
 }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mcd-menu {
  width: 200px;
 }
 .mcd-menu li a {
  height:30px;
 }
 .mcd-menu li a i {
  font-size: 22px;
 }
 .mcd-menu li a strong {
  font-size: 12px;
 }
 .mcd-menu li a small {
  font-size: 10px;
 } 
 .mcd-menu li a.search input {
  width: 120px;
  font-size: 12px;
 }
 .mcd-menu li a.search buton{
  padding: 8px 10px 9px 10px;
 }
 .mcd-menu li > ul {
  min-width:180px;
 }
 .mcd-menu li:hover > ul {
  min-width:180px;
  left:200px;
 }
 .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
  min-width:150px;
 }
 .mcd-menu li ul li:hover > ul {
  left:180px;
  min-width:150px;
 }
 .mcd-menu li ul li ul li:hover > ul {
  left:150px;
  min-width:150px;
 }
 .mcd-menu li ul a {
  font-size:12px;
 }
 .mcd-menu li ul a i {
  font-size:14px;
 }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
 
 .mcd-menu { 
  width: 50px;
 }
 .mcd-menu li a { 
  position: relative;
  padding: 12px 16px;
  height:20px;
 }
 .mcd-menu li a small { 
  display: none;
 }
 .mcd-menu li a strong { 
  display: none;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  bottom:0px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
  text-align:center;
 }
 .mcd-menu li .search { 
  display: none;
 }
 
 .mcd-menu li > ul {
  min-width:180px;
  left:70px;
 }
 .mcd-menu li:hover > ul {
  min-width:180px;
  left:50px;
 }
 .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
  min-width:150px;
 }
 .mcd-menu li ul li:hover > ul {
  left:180px;
  min-width:150px;
 }
 .mcd-menu li ul li ul li > ul {
  left:35px;
  top: 45px;
  border:0;
  border-top:4px solid #e67e22;
 }
 .mcd-menu li ul li ul li > ul:before {
  left:30px;
  top: -9px;
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
 }
 .mcd-menu li ul li ul li:hover > ul {
  left:30px;
  min-width:150px;
  top: 35px;
 }
 .mcd-menu li ul a {
  font-size:12px;
 }
 .mcd-menu li ul a i {
  font-size:14px;
 }
 
}

@media only screen and (max-width: 479px) {
    .mcd-menu { 
  width: 50px;
 }
 .mcd-menu li a { 
  position: relative;
  padding: 12px 16px;
  height:20px;
 }
 .mcd-menu li a small { 
  display: none;
 }
 .mcd-menu li a strong { 
  display: none;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  bottom:0px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
  text-align:center;
 }
 .mcd-menu li .search { 
  display: none;
 }
 
 .mcd-menu li > ul {
  min-width:180px;
  left:70px;
 }
 .mcd-menu li:hover > ul {
  min-width:180px;
  left:50px;
 }
 .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
  min-width:150px;
 }
 .mcd-menu li ul li:hover > ul {
  left:180px;
  min-width:150px;
 }
 .mcd-menu li ul li ul li > ul {
  left:35px;
  top: 45px;
  border:0;
  border-top:4px solid #e67e22;
 }
 .mcd-menu li ul li ul li > ul:before {
  left:30px;
  top: -9px;
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
 }
 .mcd-menu li ul li ul li:hover > ul {
  left:30px;
  min-width:150px;
  top: 35px;
 }
 .mcd-menu li ul a {
  font-size:12px;
 }
 .mcd-menu li ul a i {
  font-size:14px;
 }
    
}

أكواد القائمة الأفقية


HTML
<nav>
  <ul class="mcd-menu">
   <li>
    <a href="">
     <i class="fa fa-home"></i>
     <strong>Home</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="http://www.ar1web.com" traget"_blank" class="active">
     <i class="fa fa-edit"></i>
     <strong>About us</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-gift"></i>
     <strong>Features</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-globe"></i>
     <strong>News</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-comments-o"></i>
     <strong>Blog</strong>
     <small>what they say</small>
    </a>
    <ul>
     <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
     <li>
      <a href="#"><i class="fa fa-group"></i>Our Team</a>
      <ul>
       <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
       <li>
        <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
        <ul>
         <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
         <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
        </ul>
       </li>
       <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
      </ul>
     </li>
     <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
     <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
    </ul>
   </li>
   <li>
    <a href="">
     <i class="fa fa-picture-o"></i>
     <strong>Portfolio</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-envelope-o"></i>
     <strong>Contacts</strong>
     <small>drop a line</small>
    </a>
   </li>
   <li class="float">
    <a class="search">
     <input type="text" value="search ...">
     <button><i class="fa fa-search"></i></button>
    </a>
    <a href="" class="search-mobile">
     <i class="fa fa-search"></i>
    </a>
   </li>
  </ul>
 </nav>
Css
.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  height: 100px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
.mcd-menu li {
  float: left;
  position: relative;
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  text-align: center;
  color: #777;
  border-right: 1px solid #E7E7E7;
}
.mcd-menu li a i {
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
}
.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  border-top: 4px solid #e67e22;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  top: 130px;
  z-index: 1000;
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  top: 100px;
}
.mcd-menu li ul li {
  float: none;
}
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}  
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -14px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



.mcd-menu li.float {
  float: right;
}
.mcd-menu li a.search {
  padding: 29px 20px 30px 10px;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  padding: 10px;
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}


.search-mobile { 
 display:none !important;
 background:#e67e22;
 border-left:1px solid #e67e22;
 border-radius:0 3px 3px 0;
}
.search-mobile i { 
 color:#FFF; 
 margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .mcd-menu li a.search input {
  width:100px;
 }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mcd-menu {
  height: 85px;
 }
 .mcd-menu li a {
  padding: 12px;
 }
 .mcd-menu li a i {
  font-size: 22px;
 }
 .mcd-menu li a strong {
  font-size: 12px;
 }
 .mcd-menu li a small {
  font-size: 10px;
 }
 .mcd-menu li a.search {
  display:none;
 }
 .search-mobile { 
  display:block !important;
  margin: 20px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
 }
 .mcd-menu li:hover > ul {
  top:85px;
  min-width:180px;
 }
 .mcd-menu li ul li > ul {
  min-width:150px;
  left:200px;
  top:0;
 }
 .mcd-menu li ul li:hover > ul {
  min-width:150px;
  left:180px;
  top:0;
 }
 .mcd-menu li ul li ul li ul {
  min-width:150px;
  left:25px !important;
  top:54px;
  border:0;
  border-top:3px solid #e67e22;
 }
 .mcd-menu li ul li ul li:hover ul {
  top:35px;
 }
 .mcd-menu li ul li ul li ul:before {
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  left:10%;
  top:-8px;
 }
 .mcd-menu li:hover ul a {
  font-size:12px;
 }
 .mcd-menu li:hover ul a i {
  font-size:14px;
 }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .mcd-menu {
      height: 42px;
      position: relative;
    }
 .mcd-menu li a {
  padding: 12px 17.7px;
 }
    .mcd-menu li a strong, .mcd-menu li a small, .mcd-menu li a.search {
      display: none;
    }
    .mcd-menu li a i {
      margin: 0;
      font-size: 18px;
    }
    .mcd-menu li {
      position: static;
    }
    .mcd-menu li ul {
      min-width: 100%;
      left: 0;
      top: 50px;
    }
    .mcd-menu li:hover > ul {
      top: 42px;
    }
    .mcd-menu li > ul:before {
      border:0;
    }
    .mcd-menu li ul > li {
      position: relative;
    }
    .mcd-menu li ul li:hover > ul {
   left:34px;
    }
 .mcd-menu li a {
  position: relative;
  font-size:12px;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  top:-20px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
 }
 .mcd-menu li a.active:before{
  left: 40%;
 }
 .search-mobile { 
  display:block !important;
 }
 
 .mcd-menu li ul li > ul {
  min-width:200px;
  left:200px;
 }
 .mcd-menu li ul li:hover ul {
  left:180px;
 }
 .mcd-menu li ul li ul:before {
  left:-9px;
 }
 .mcd-menu li ul li ul li ul {
  min-width:200px;
  border:0;
  border-top:3px solid #e67e22;
  left:25px !important;
  top: 45px;
 }
 .mcd-menu li ul li ul li:hover ul {
  top:40px;
 }
 .mcd-menu li ul li ul li ul:before {
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  left:10%;
  top:-8px;
 }
}

@media only screen and (max-width: 479px) {
    .mcd-menu {
      height: 42px;
      position: relative;
    }
    .mcd-menu li a strong, .mcd-menu li a small, .mcd-menu li a.search {
      display: none;
    }
    .mcd-menu li a {
      padding: 12px 13.8px;
  font-size:12px;
    }
    .mcd-menu li a i {
      margin: 0;
      font-size: 18px;
    }
    .mcd-menu li {
      position: static;
    }
    .mcd-menu li ul {
      min-width: 100%;
      left: 0;
      top: 50px;
    }
    .mcd-menu li:hover > ul {
      top: 42px;
    }
    .mcd-menu li > ul:before {
      border:0;
    }
    .mcd-menu li ul > li {
      position: relative;
    }
    .mcd-menu li ul li:hover > ul {
   left:34px;
    }
 .mcd-menu li a {
  position: relative;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  top:-20px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
 }
 .mcd-menu li a.active:before{
  left: 40%;
 }
 
 .mcd-menu li ul li > ul {
  min-width:150px;
  left:160px;
 }
 .mcd-menu li ul li:hover ul {
  left:120px;
 }
 .mcd-menu li ul li ul:before {
  left:-9px;
 }
 .mcd-menu li ul li ul li ul {
  min-width:160px;
  left:25px !important;
  top:39px;
  border:0;
  border-top:3px solid #e67e22;
 }
 .mcd-menu li ul li ul li:hover ul {
  top:39px;
 }
 .mcd-menu li ul li ul li ul:before {
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  left:10%;
  top:-8px;
 }
    
}
أشارككم مع نهاية الأسبوع احد القوائم الإحترافية بتصميم Css أصلي قائمة متجاوبة في قمة الأناقة والخفة كنت أستعملها لنفسي في القالب السابق لمدونة عرب ويب، تحتوي القائمة على أيقونات FontAwsome والتي يسهل تغييرها وهذا موضوع خاص بها، تتوفر على قوائم منسدلة طفيفة مع محرك بحث خاص بها  ولكم الحرية بتصفحها بشكل مباشر، القائمة متوفرة بشكل عمودي وأفقي
أكواد القائمة العمودية


HTML
<nav>
  <ul class="mcd-menu">
   <li>
    <a href="">
     <i class="fa fa-home"></i>
     <strong>Home</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="" class="active">
     <i class="fa fa-edit"></i>
     <strong>About us</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-gift"></i>
     <strong>Features</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-globe"></i>
     <strong>News</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-comments-o"></i>
     <strong>Blog</strong>
     <small>what they say</small>
    </a>
    <ul>
     <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
     <li>
      <a href="#"><i class="fa fa-group"></i>Our Team</a>
      <ul>
       <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
       <li>
        <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
        <ul>
         <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
         <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
        </ul>
       </li>
       <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
      </ul>
     </li>
     <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
     <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
    </ul>
   </li>
   <li>
    <a href="">
     <i class="fa fa-picture-o"></i>
     <strong>Portfolio</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-envelope-o"></i>
     <strong>Contacts</strong>
     <small>drop a line</small>
    </a>
   </li>
   <li class="float">
    <a class="search">
     <input type="text" value="search ...">
     <button><i class="fa fa-search"></i></button>
    </a>
    <a href="" class="search-mobile">
     <i class="fa fa-search"></i>
    </a>
   </li>
  </ul>
 </nav>
Css
.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  
  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/
  
  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/
  
  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */
  
}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
  
  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*border-top: 4px solid #e67e22;*/
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;
  
  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/
  
  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
  
  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}  
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
  
  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
  
  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}


.search-mobile { 
 display:none !important;
 background:#e67e22;
 border-left:1px solid #e67e22;
 border-radius:0 3px 3px 0;
}
.search-mobile i { 
 color:#FFF; 
 margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .mcd-menu {
  margin-left:10px;
 }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mcd-menu {
  width: 200px;
 }
 .mcd-menu li a {
  height:30px;
 }
 .mcd-menu li a i {
  font-size: 22px;
 }
 .mcd-menu li a strong {
  font-size: 12px;
 }
 .mcd-menu li a small {
  font-size: 10px;
 } 
 .mcd-menu li a.search input {
  width: 120px;
  font-size: 12px;
 }
 .mcd-menu li a.search buton{
  padding: 8px 10px 9px 10px;
 }
 .mcd-menu li > ul {
  min-width:180px;
 }
 .mcd-menu li:hover > ul {
  min-width:180px;
  left:200px;
 }
 .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
  min-width:150px;
 }
 .mcd-menu li ul li:hover > ul {
  left:180px;
  min-width:150px;
 }
 .mcd-menu li ul li ul li:hover > ul {
  left:150px;
  min-width:150px;
 }
 .mcd-menu li ul a {
  font-size:12px;
 }
 .mcd-menu li ul a i {
  font-size:14px;
 }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
 
 .mcd-menu { 
  width: 50px;
 }
 .mcd-menu li a { 
  position: relative;
  padding: 12px 16px;
  height:20px;
 }
 .mcd-menu li a small { 
  display: none;
 }
 .mcd-menu li a strong { 
  display: none;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  bottom:0px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
  text-align:center;
 }
 .mcd-menu li .search { 
  display: none;
 }
 
 .mcd-menu li > ul {
  min-width:180px;
  left:70px;
 }
 .mcd-menu li:hover > ul {
  min-width:180px;
  left:50px;
 }
 .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
  min-width:150px;
 }
 .mcd-menu li ul li:hover > ul {
  left:180px;
  min-width:150px;
 }
 .mcd-menu li ul li ul li > ul {
  left:35px;
  top: 45px;
  border:0;
  border-top:4px solid #e67e22;
 }
 .mcd-menu li ul li ul li > ul:before {
  left:30px;
  top: -9px;
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
 }
 .mcd-menu li ul li ul li:hover > ul {
  left:30px;
  min-width:150px;
  top: 35px;
 }
 .mcd-menu li ul a {
  font-size:12px;
 }
 .mcd-menu li ul a i {
  font-size:14px;
 }
 
}

@media only screen and (max-width: 479px) {
    .mcd-menu { 
  width: 50px;
 }
 .mcd-menu li a { 
  position: relative;
  padding: 12px 16px;
  height:20px;
 }
 .mcd-menu li a small { 
  display: none;
 }
 .mcd-menu li a strong { 
  display: none;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  bottom:0px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
  text-align:center;
 }
 .mcd-menu li .search { 
  display: none;
 }
 
 .mcd-menu li > ul {
  min-width:180px;
  left:70px;
 }
 .mcd-menu li:hover > ul {
  min-width:180px;
  left:50px;
 }
 .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
  min-width:150px;
 }
 .mcd-menu li ul li:hover > ul {
  left:180px;
  min-width:150px;
 }
 .mcd-menu li ul li ul li > ul {
  left:35px;
  top: 45px;
  border:0;
  border-top:4px solid #e67e22;
 }
 .mcd-menu li ul li ul li > ul:before {
  left:30px;
  top: -9px;
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
 }
 .mcd-menu li ul li ul li:hover > ul {
  left:30px;
  min-width:150px;
  top: 35px;
 }
 .mcd-menu li ul a {
  font-size:12px;
 }
 .mcd-menu li ul a i {
  font-size:14px;
 }
    
}

أكواد القائمة الأفقية


HTML
<nav>
  <ul class="mcd-menu">
   <li>
    <a href="">
     <i class="fa fa-home"></i>
     <strong>Home</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="http://www.ar1web.com" traget"_blank" class="active">
     <i class="fa fa-edit"></i>
     <strong>About us</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-gift"></i>
     <strong>Features</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-globe"></i>
     <strong>News</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-comments-o"></i>
     <strong>Blog</strong>
     <small>what they say</small>
    </a>
    <ul>
     <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
     <li>
      <a href="#"><i class="fa fa-group"></i>Our Team</a>
      <ul>
       <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
       <li>
        <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
        <ul>
         <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
         <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
        </ul>
       </li>
       <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
      </ul>
     </li>
     <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
     <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
    </ul>
   </li>
   <li>
    <a href="">
     <i class="fa fa-picture-o"></i>
     <strong>Portfolio</strong>
     <small>sweet home</small>
    </a>
   </li>
   <li>
    <a href="">
     <i class="fa fa-envelope-o"></i>
     <strong>Contacts</strong>
     <small>drop a line</small>
    </a>
   </li>
   <li class="float">
    <a class="search">
     <input type="text" value="search ...">
     <button><i class="fa fa-search"></i></button>
    </a>
    <a href="" class="search-mobile">
     <i class="fa fa-search"></i>
    </a>
   </li>
  </ul>
 </nav>
Css
.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  height: 100px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
.mcd-menu li {
  float: left;
  position: relative;
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  text-align: center;
  color: #777;
  border-right: 1px solid #E7E7E7;
}
.mcd-menu li a i {
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
}
.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  border-top: 4px solid #e67e22;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  top: 130px;
  z-index: 1000;
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  top: 100px;
}
.mcd-menu li ul li {
  float: none;
}
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}  
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -14px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



.mcd-menu li.float {
  float: right;
}
.mcd-menu li a.search {
  padding: 29px 20px 30px 10px;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  padding: 10px;
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}


.search-mobile { 
 display:none !important;
 background:#e67e22;
 border-left:1px solid #e67e22;
 border-radius:0 3px 3px 0;
}
.search-mobile i { 
 color:#FFF; 
 margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .mcd-menu li a.search input {
  width:100px;
 }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mcd-menu {
  height: 85px;
 }
 .mcd-menu li a {
  padding: 12px;
 }
 .mcd-menu li a i {
  font-size: 22px;
 }
 .mcd-menu li a strong {
  font-size: 12px;
 }
 .mcd-menu li a small {
  font-size: 10px;
 }
 .mcd-menu li a.search {
  display:none;
 }
 .search-mobile { 
  display:block !important;
  margin: 20px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
 }
 .mcd-menu li:hover > ul {
  top:85px;
  min-width:180px;
 }
 .mcd-menu li ul li > ul {
  min-width:150px;
  left:200px;
  top:0;
 }
 .mcd-menu li ul li:hover > ul {
  min-width:150px;
  left:180px;
  top:0;
 }
 .mcd-menu li ul li ul li ul {
  min-width:150px;
  left:25px !important;
  top:54px;
  border:0;
  border-top:3px solid #e67e22;
 }
 .mcd-menu li ul li ul li:hover ul {
  top:35px;
 }
 .mcd-menu li ul li ul li ul:before {
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  left:10%;
  top:-8px;
 }
 .mcd-menu li:hover ul a {
  font-size:12px;
 }
 .mcd-menu li:hover ul a i {
  font-size:14px;
 }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .mcd-menu {
      height: 42px;
      position: relative;
    }
 .mcd-menu li a {
  padding: 12px 17.7px;
 }
    .mcd-menu li a strong, .mcd-menu li a small, .mcd-menu li a.search {
      display: none;
    }
    .mcd-menu li a i {
      margin: 0;
      font-size: 18px;
    }
    .mcd-menu li {
      position: static;
    }
    .mcd-menu li ul {
      min-width: 100%;
      left: 0;
      top: 50px;
    }
    .mcd-menu li:hover > ul {
      top: 42px;
    }
    .mcd-menu li > ul:before {
      border:0;
    }
    .mcd-menu li ul > li {
      position: relative;
    }
    .mcd-menu li ul li:hover > ul {
   left:34px;
    }
 .mcd-menu li a {
  position: relative;
  font-size:12px;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  top:-20px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
 }
 .mcd-menu li a.active:before{
  left: 40%;
 }
 .search-mobile { 
  display:block !important;
 }
 
 .mcd-menu li ul li > ul {
  min-width:200px;
  left:200px;
 }
 .mcd-menu li ul li:hover ul {
  left:180px;
 }
 .mcd-menu li ul li ul:before {
  left:-9px;
 }
 .mcd-menu li ul li ul li ul {
  min-width:200px;
  border:0;
  border-top:3px solid #e67e22;
  left:25px !important;
  top: 45px;
 }
 .mcd-menu li ul li ul li:hover ul {
  top:40px;
 }
 .mcd-menu li ul li ul li ul:before {
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  left:10%;
  top:-8px;
 }
}

@media only screen and (max-width: 479px) {
    .mcd-menu {
      height: 42px;
      position: relative;
    }
    .mcd-menu li a strong, .mcd-menu li a small, .mcd-menu li a.search {
      display: none;
    }
    .mcd-menu li a {
      padding: 12px 13.8px;
  font-size:12px;
    }
    .mcd-menu li a i {
      margin: 0;
      font-size: 18px;
    }
    .mcd-menu li {
      position: static;
    }
    .mcd-menu li ul {
      min-width: 100%;
      left: 0;
      top: 50px;
    }
    .mcd-menu li:hover > ul {
      top: 42px;
    }
    .mcd-menu li > ul:before {
      border:0;
    }
    .mcd-menu li ul > li {
      position: relative;
    }
    .mcd-menu li ul li:hover > ul {
   left:34px;
    }
 .mcd-menu li a {
  position: relative;
 }
 .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
  display:block;
  font-size:10px;
  padding:3px 0;
  position:absolute;
  top:-20px;
  left:0;
  background:#e67e22;
  color:#FFF;
  min-width:100%;
  text-transform:lowercase;
  font-weight:normal;
 }
 .mcd-menu li a.active:before{
  left: 40%;
 }
 
 .mcd-menu li ul li > ul {
  min-width:150px;
  left:160px;
 }
 .mcd-menu li ul li:hover ul {
  left:120px;
 }
 .mcd-menu li ul li ul:before {
  left:-9px;
 }
 .mcd-menu li ul li ul li ul {
  min-width:160px;
  left:25px !important;
  top:39px;
  border:0;
  border-top:3px solid #e67e22;
 }
 .mcd-menu li ul li ul li:hover ul {
  top:39px;
 }
 .mcd-menu li ul li ul li ul:before {
  border:0;
  border-bottom:5px solid #e67e22;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  left:10%;
  top:-8px;
 }
    
}
13 Blogger تعليقات
Disqus
13 التعليقات
المشرف
avatar

أخي هناك خطا في اكواد html يالنسبة للقائمة الافقية انضر الصورة
http://im65.gulfup.com/m7Ppdh.gif
لا اعرف ما السبب مع العلم اني وضعت الاكواد تحت البودي
ارجو حل المشكل و شكرا

المشرف
avatar

احذف الكود traget"_blank"

ملاحظة : عليك أن تكون لديك خبرة في التعامل مع الأكواد لأنك ستواجه عرقلات اخرى فالقائمة وضعتها للذين لديهم خبرة

المشرف
avatar

حسنا شكرا لك اخي

المشرف
avatar

العفو اخي

المشرف
avatar

بعد جهد وصبر لا بأس به استطعت التعديل عليها كيفما أشاء :)

لكن في النهاية صادفتني مشكلة لم أستطع التفاعل معها . . أريد زيادة المساحة بين الكلمة الرئيسية والوصف للكلمة في الأداة مثلاً في موقعي http://www.ebda2.net/ الرئيسية ، عد إلى الرئيسية إريد توسيع الفرق بينهم ماهو الكود السمؤول عن ذلك ؟

:)

تحياتي لك قائمة رائعة

المشرف
avatar

أيضاً لماذا لا يتحرك النص ؟ أقصد النص الوصفي مثل سياسة الخصوصية ، سياسية خوصيتنا لا تتحرك في الأداة داخل موقعي !!

ماهو الكود المسوؤل :( وماذا يجب أن أفعل له أتمنى أن تعذر طلباتي الكثيرة

المشرف
avatar

لتوسيع بين النصوص الأفقي عليك إدخال : line-height
لإضافته في القائمة ابحث عن : .mcd-menu li a
ضع الكود التالي أسفلها : line-height.1.9em
يمكنك التحكم في زيادة أو النقصان بتغيير قيمة الرقم مثلا : 2 2.1 ....
بالنسبة لسؤالك الثاني فسياسة الخصوصية تتحرك أيضا لأني لم أرى شيئ مغاير !
ايضا كملاحظة مني يمكنك تغيير إتجاه الأوقونات لليمين ليصبح المنظر أجمل لفعل ذلك ابحث عن :
.mcd-menu li a i غير الأكواد أسفلها بهذه : float: right;
font-size: 40px;
margin: 0 -30px 0 0;

المشرف
avatar

شكراً لك حسام :) ، هل من الممكن أن نرى غداً شرح اضافة تأثيرات للمشاركات الشائعة ومن ضمن التأثيرات التأثير الخاص بموقعك :-d


لا أدري ان كنت أتدخل كثيراً بطلب أشياء مشابهة في موقعك لذلك أتمنى أن تعذرني :lv

المشرف
avatar

هي إضافة خاصة بالقالب لا يسمح لي بمشاركتها
* لقد أرسلتها لك في البريد الإلكتروني

لا مشكلة في طلباتك :D .. :lv

المشرف
avatar

اين اضع الكود الاول والثاني في القائمة الثانية

المشرف
avatar

أكواد Css تضع فوق ]]>
أكواد هتمل تختار مكان مناسب لها داخل القالب بين body>

المشرف
avatar
abou nizar 1/26/2015
delete

القائمة صعبة التركيب لانها تتعارض مع القوالب قمت بتعريبها سابقا واستعملتها لكن وجد فيها الكثير من المشاكل لانها تتعارض مع القوالب بالتوفيق للجميع aby design

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة