懸停和出現子菜單上的垂直對齊擴展菜單項

Question

我試圖創建一個默認情況下顯示爲沒有任何文本的小圓圈的頂部導航。在懸停時，我希望有問題的圈子可以長大/展開，並且要顯示菜單項的文本，以及下拉菜單（如果適用）。理想情況下具有緩入/緩出效果。此外，在當前的設置，我不是很確定在何處放置子菜單中的HTML ..

圖片1：default & on hover appearance

點有幾個要求：

• 圈子中央擴大主菜單項目完成後擴大，因此有輕微的延遲

我有一個jsfiddle here出現

子菜單，但我我堅持如何繼續並取得預期的效果。也許我從一個完全錯誤的角度來看待這個問題。請幫忙！

$(".nav1").hover(function() { 
 
    $(".item1").stop(true,true).delay(200).show(100); 
 
}, function() { 
 
    $(".item1").stop(true,true).delay(200).hide(0); 
 
}); 
 

 
$(".nav2").hover(function() { 
 
    $(".item2").stop(true,true).delay(200).show(100); 
 
}, function() { 
 
    $(".item2").stop(true,true).delay(200).hide(0); 
 
});

.navContainer { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #fff; 
 
} 
 

 
.circleContainer { 
 
\t float:left; 
 
    position: relative; 
 
    width: 50px; 
 
    padding-bottom: 50px; /* = width for a 1:1 aspect ratio */ 
 
    margin-right: 10px; 
 
    background: transparent; 
 
    overflow: hidden; 
 
    background-color: #eee; 
 
    border-radius: 50%; 
 
} 
 

 
.circleContent { 
 
\t position: absolute; 
 
    height: 100%; /* = 100% - 2*5% padding */ 
 
    width: 100%; /* = 100% - 2*5% padding */ 
 
    padding: 0%; 
 
} 
 

 
.circleTable { 
 
\t display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.circleTableCell { 
 
\t display: table-cell; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 0.75em; 
 
    font-weight: 700; 
 
} 
 

 
.hide { 
 
    display: ; 
 
} 
 

 
.item1, .item2 { 
 
    display: none; 
 
    top: 50%; 
 
    left: 50%; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="navContainer"> 
 

 
    <div class="circleContainer nav1"> 
 
    <div class="circleContent"> 
 
     <div class="circleTable"> 
 
     <a href="/link1" class="circleTableCell"> 
 
      <span class="item1">Item 1</span> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="circleContainer nav2"> 
 
    <div class="circleContent"> 
 
     <div class="circleTable"> 
 
     <a href="/link1" class="circleTableCell"> 
 
      <span class="item2">Item 2</span> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Answer 1

我給你以下，希望它幫助。

part1。對於圓的比例，請使用以下懸停：

-webkit-transform: scale(1.75); 
    transform: scale(1.75); 

part2。對於子菜單，您需要先添加它們，然後懸停顯示（你可以使用你正在使用的item1 item2等同一類..

你可以用js推開左/右側的菜單。

$(".nav1").closest('.wraper').hover(function() { 
 
    $(".item1").stop(true, true).delay(200).show(100); 
 
}, function() { 
 
    $(".item1").stop(true, true).delay(200).hide(0); 
 
}); 
 

 
$(".nav2").closest('.wraper').hover(function() { 
 
    $(".item2").stop(true, true).delay(200).show(100); 
 
}, function() { 
 
    $(".item2").stop(true, true).delay(200).hide(0); 
 
}); 
 

 
$(".nav3").closest('.wraper').hover(function() { 
 
    $(".item3").stop(true, true).delay(200).show(100); 
 
}, function() { 
 
    $(".item3").stop(true, true).delay(200).hide(0); 
 
});

.navContainer { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100px; 
 
    top: 50px; 
 
} 
 

 
.circleContainer { 
 
    position: relative; 
 
    width: 50px; 
 
    margin: 25px; 
 
    padding-bottom: 50px; 
 
    /* = width for a 1:1 aspect ratio */ 
 
    background: transparent; 
 
    overflow: hidden; 
 
    background-color: #eee; 
 
    border-radius: 50%; 
 
    -webkit-transition: all 200ms ease-in-out; 
 
    transition: all 200ms ease-in-out; 
 
} 
 

 
.wraper:hover .circleContainer { 
 
    -webkit-transform: scale(1.75); 
 
    transform: scale(1.75); 
 
} 
 

 
.circleContent { 
 
    position: absolute; 
 
    height: 100%; 
 
    /* = 100% - 2*5% padding */ 
 
    width: 100%; 
 
    /* = 100% - 2*5% padding */ 
 
    padding: 0%; 
 
} 
 

 
.circleTable { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.circleTableCell { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 0.75em; 
 
    font-weight: 700; 
 
} 
 

 
.item1, 
 
.item2, 
 
.item3 { 
 
    display: none; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
} 
 

 
.wraper { 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 

 
ul { 
 
    text-align: center; 
 
    width: 100%; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
ul ul { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-top: 25px; 
 
    margin-left: 25px; 
 
    padding: 0; 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 

 
<div class="navContainer"> 
 
    <div class="wraper"> 
 
    <div class="circleContainer nav1"> 
 
     <div class="circleContent"> 
 
     <div class="circleTable"> 
 
      <a href="/link1" class="circleTableCell"> 
 
      <span class="item1">Item 1</span> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <ul class="item1"> 
 
     <li> 
 
     <ul> 
 
      <li><a href="#">Sub Menu 1</a></li> 
 
      <li><a href="#">Sub Menu 2</a></li> 
 
      <li><a href="#">Sub Menu 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="wraper"> 
 
    <div class="circleContainer nav2"> 
 
     <div class="circleContent"> 
 
     <div class="circleTable"> 
 
      <a href="/link1" class="circleTableCell"> 
 
      <span class="item2">Item 2</span> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <ul class="item2"> 
 
     <li> 
 
     <ul> 
 
      <li><a href="#">Sub Menu 1</a></li> 
 
      <li><a href="#">Sub Menu 2</a></li> 
 
      <li><a href="#">Sub Menu 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="wraper"> 
 
    <div class="circleContainer nav3"> 
 
     <div class="circleContent"> 
 
     <div class="circleTable"> 
 
      <a href="/link1" class="circleTableCell"> 
 
      <span class="item3">Item 3</span> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <ul class="item3"> 
 
     <li> 
 
     <ul> 
 
      <li><a href="#">Sub Menu 1</a></li> 
 
      <li><a href="#">Sub Menu 2</a></li> 
 
      <li><a href="#">Sub Menu 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
\t 
 
</div>