Демо Скачать исходники

Ниже представлен код меню, оформленного в стиле OS X.

1. HTML разметка. Измените ссылки для иеонок изображения.

   <div class="dock__container">
       <div class="dock__wrapper">
           <div class="dock__cap"></div>
           <ul class="dock__ul">
               <li>
                   <span>Velmaster</span>
                   <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon01.png"></a>
               </li>
               <li>
                   <span>Vkontakte</span>
                   <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon02.png"></a>
               </li>
               <li>
                   <span>WhatsApp</span>
                   <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon03.png"></a>
               </li>
               <li>
                   <span>Skype</span>
                   <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon04.png"></a>
               </li>
                   <li>
                       <span>Velmaster</span>
                       <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon01.png"></a>
                   </li>
                   <li>
                       <span>Vkontakte</span>
                       <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon02.png"></a>
                   </li>
                   <li>
                       <span>WhatsApp</span>
                       <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon03.png"></a>
                   </li>
                   <li>
                       <span>Skype</span>
                       <a href="#"><img alt="" src="/images/blog/2018/OS-X/icon04.png"></a>
                   </li>
           </ul>
       </div>
   </div>

2. CSS стили. Не забудьте изменить фон доклета в классах .dock__cap и .dock__ul

   .dock__container { 
       position: fixed; 
       bottom: 0px;
       left:0px;
       height: 120px; 
       padding: 50px 0 0; 
       text-align: center; 
       -webkit-border-radius: 6px; 
       -moz-border-radius: 6px; 
       width: 100%; 
       line-height: 1; 
       z-index: 100;
       background: #000;
   }
   .dock__wrapper {
       width: auto; 
       display: inline-block; 
       position: relative; 
       border-bottom: solid 2px rgba(255,255,255,.35); 
       line-height: 0; 
   }
   .dock__container, .dock__wrapper * {
       -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
       box-sizing: content-box;
   }
   .dock__cap {
       display: block;
       height: 100px;
       width: 40px;
       background: url(/images/blog/2018/OS-X/dock-background.png) bottom left no-repeat;
       position: absolute;
       bottom: 0px;
       left: 0px;
   }
   .dock__ul { 
       display: inline-block; 
       height: 130px; 
       padding: 0 40px 0 0; 
       background: url(/images/blog/2018/OS-X/dock-background.png) no-repeat right bottom; 
       overflow: hidden; 
       margin: 0 0 0 40px;
   }
   .dock__ul li { 
       display: block; 
       position: relative; 
       float: left; 
       width: 50px; 
       height: 50px; 
       margin: 60px 2px 4px; 
       -webkit-transition: 0.15s linear; 
       -webkit-transition-property: 
       -webkit-transform margin; 
       text-align: center;
   }
   .dock__ul li a { 
       display: block; 
       height: 50px; 
       padding: 0 1px; 
       -webkit-transition: 0.15s linear; 
       -webkit-transition-property: -webkit-transform margin; margin: 0;
       -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
   }
   .dock__ul li a img { 
       width: 48px; 
   }
   .dock__ul li:hover { 
       margin-left: 18px; 
       margin-right: 18px;
       z-index: 200;
   }
   .dock__ul li:hover a { 
       -webkit-transform-origin: center bottom;
       -webkit-transform: scale(1.5);
   }
   .dock__ul li.nearby { 
       margin-left: 6px; 
       margin-right: 6px;
       z-index: 100;
   }
   .dock__ul li.nearby a { 
       -webkit-transform-origin: center bottom;
       -webkit-transform: scale(1.25);
   }
   .dock__ul li span {
       background: rgba(0,0,0,0.75);
       position: absolute;
       bottom: 80px;
       left: -12px;
       margin: 0 auto;
       display: none;
       width: auto;
       font-size: 11px;
       font-weight: bold;
       padding: 11px 6px;
       -webkit-border-radius: 6px;
       color: #fff;
   }
   .dock__ul li:hover span { 
       display: block; 
   }

3. jQuery

   	jQuery(document).ready(function(){
   			jQuery(".dock__ul li").each(function (type) {
   	     	jQuery(this).hover(function () {
   	      		jQuery(this).prev("li").addClass("nearby");
   	      		jQuery(this).next("li").addClass("nearby");
   	     	},
   	     	function () {
   	      		jQuery(this).prev("li").removeClass("nearby");
   	      		jQuery(this).next("li").removeClass("nearby");
   	     	});
   	    });
   	});