Скрыть содержимое списка до тех пор, пока не щелкнули значок

Question

Я не хочу, чтобы эти значки списка отображались поверх значка Google до тех пор, пока он не щелкнут.

Я попытался добавить display:none к каждому элементу.

(function(){ 
 
\t var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120; 
 
\t ul.click(function(){ 
 
\t \t $(this).toggleClass('active'); 
 
\t \t if($(this).hasClass('active')){ 
 
\t \t \t for(var a=0;a<i;a++){ 
 
\t \t \t \t li.eq(a).css({ 
 
\t \t \t \t \t 'transition-delay':""+(50*a)+"ms", 
 
\t \t \t \t \t '-webkit-transition-delay':""+(50*a)+"ms", 
 
\t \t \t \t \t 'left':(r*Math.cos(90/n*a*(Math.PI/180))), 
 
\t \t \t \t \t 'top':(-r*Math.sin(90/n*a*(Math.PI/180))) 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }else{ 
 
\t \t \t li.removeAttr('style'); 
 
\t \t } 
 
\t }); 
 
})($);

#navs { 
 
    position: fixed; 
 
    left:10px; 
 
    bottom:10px; 
 
    width: 128px; 
 
    height: 128px; 
 
    line-height: 40px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    background: url(https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png) no-repeat; 
 
    background-size: 100px 100px; 
 
    z-index: 1007; 
 
} 
 

 
#navs>li, 
 
#navs:after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
} 
 

 
#navs>li { 
 
    transition: all .6s; 
 
    -webkit-transition: all .6s; 
 
    -moz-transition: .6s; 
 
} 
 

 
#navs a { 
 
    width: 60px; 
 
    height: 60px; 
 
    display: inline-block;; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background-color: rgba(0,0,0, 0.5); 
 
    font-size: 30px; 
 
    line-height: 60px; 
 
}

<ul id="navs"> 
 
     <li><a href="#"><i class="fa fa-home"></i></a></li> 
 
     <li><a href="#about"><i class="fa fa-info"></i></a></li> 
 
     <li><a href="#contact"><i class="fa fa-phone"></i></a></li> 
 

 
    </ul>

Answer 1

Некоторые, как пытались скрыть li изначально. проверьте фрагмент. Однако вам нужно настроить размер этих circles

(function(){ 
 
\t var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120; 
 
\t ul.click(function(){ 
 
     
 
\t \t $(this).toggleClass('active'); 
 
\t \t if($(this).hasClass('active')){ 
 
\t \t \t for(var a=0;a<i;a++){ 
 
\t \t \t \t li.eq(a).css({ 
 
\t \t \t \t \t 'transition-delay':""+(50*a)+"ms", 
 
\t \t \t \t \t '-webkit-transition-delay':""+(50*a)+"ms", 
 
\t \t \t \t \t 'left':(r*Math.cos(90/n*a*(Math.PI/180))), 
 
\t \t \t \t \t 'top':(-r*Math.sin(90/n*a*(Math.PI/180))), 
 
        'background-color': 'rgba(0,0,0, 0.5)' 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }else{ 
 
\t \t \t li.removeAttr('style'); 
 
\t \t } 
 
\t }); 
 
})($);

#navs { 
 
    position: fixed; 
 
    left:10px; 
 
    bottom:10px; 
 
    width: 128px; 
 
    height: 128px; 
 
    line-height: 40px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    background: url(https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png) no-repeat; 
 
    background-size: 100px 100px; 
 
    z-index: 1007; 
 
} 
 

 
#navs>li, 
 
#navs:after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
} 
 

 
#navs>li { 
 
    transition: all .6s; 
 
    -webkit-transition: all .6s; 
 
    -moz-transition: .6s; 
 
} 
 

 
#navs a { 
 
    width: 60px; 
 
    height: 60px; 
 
    display: inline-block;; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    /*background color removed from here and given to transition logic of js*/ 
 
    font-size: 30px; 
 
    line-height: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<ul id="navs"> 
 
     <li><a href="#"><i class="fa fa-home"></i></a></li> 
 
     <li><a href="#about"><i class="fa fa-info"></i></a></li> 
 
     <li><a href="#contact"><i class="fa fa-phone"></i></a></li> 
 

 
    </ul>

Answer 2

Добавить непрозрачности 0 в CSS и непрозрачностью 1 в функции мыши сценария

#navs>li{ 
opacity: 0; 
... 
} 

li.eq(a).css({ 
    ... 
    'opacity':1 
}) 

(function(){ 
 
\t var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120; 
 
\t ul.click(function(){ 
 
\t \t $(this).toggleClass('active'); 
 
\t \t if($(this).hasClass('active')){   
 
\t \t \t for(var a=0;a<i;a++){ 
 
\t \t \t \t li.eq(a).css({ 
 
\t \t \t \t \t 'transition-delay':""+(50*a)+"ms", 
 
\t \t \t \t \t '-webkit-transition-delay':""+(50*a)+"ms", 
 
\t \t \t \t \t 'left':(r*Math.cos(90/n*a*(Math.PI/180))), 
 
\t \t \t \t \t 'top':(-r*Math.sin(90/n*a*(Math.PI/180))), 
 
        'opacity':1 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }else{ 
 
\t \t \t li.removeAttr('style'); 
 
\t \t } 
 
\t }); 
 
})($);

#navs { 
 
    position: fixed; 
 
    left:10px; 
 
    bottom:10px; 
 
    width: 128px; 
 
    height: 128px; 
 
    line-height: 40px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    background: url(https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png) no-repeat; 
 
    background-size: 100px 100px; 
 
    z-index: 1007; 
 
} 
 

 
#navs>li, 
 
#navs:after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
} 
 

 
#navs>li { 
 
    transition: all .6s; 
 
    -webkit-transition: all .6s; 
 
    -moz-transition: .6s; 
 
    opacity: 0; 
 
} 
 

 
#navs a { 
 
    width: 60px; 
 
    height: 60px; 
 
    display: inline-block;; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background-color: rgba(0,0,0, 0.5); 
 
    font-size: 30px; 
 
    line-height: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="navs"> 
 
     <li><a href="#"><i class="fa fa-home"></i></a></li> 
 
     <li><a href="#about"><i class="fa fa-info"></i></a></li> 
 
     <li><a href="#contact"><i class="fa fa-phone"></i></a></li> 
 

 
    </ul>