Listeninhalt ausblenden, bis das Symbol geklickt wurde

-1

Ich möchte nicht, dass diese Listen-Symbole über dem Google-Symbol angezeigt werden, bis sie angeklickt werden.Listeninhalt ausblenden, bis das Symbol geklickt wurde

i do not want that list icons on top of google icon when it is unclicked

Ich habe versucht, das Hinzufügen display:none zu jedem Element.

(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>

Quelle

2016-11-11 dhaval

Willkommen bei Stack Overflow! Um Ihnen eine gute Antwort zu geben, könnte es uns helfen, wenn Sie einen Blick auf [fragen] haben, falls Sie das nicht bereits getan haben. Es könnte auch nützlich sein, wenn Sie ein [mcve] bereitstellen könnten. – Mat

Einige, wie versucht, die li zunächst zu verbergen. Überprüfen Sie das Snippet. Allerdings müssen Sie die Größe dieser 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>

Quelle

2016-11-11 12:26:15

hinzufügen Opazität 0 in CSS und Opazität 1 in Skript Klickfunktion

#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>

einzustellen

Quelle

2016-11-11 12:32:44 Sasikumar

Es funktioniert und in einem idealen Zustand sind die Listenlinks und der Kreis nicht sichtbar, aber die Links sind aktiv. Obwohl ich oben rechts auf das Google-Symbol klicke, klicke ich doch auf den Link der Liste. Wie kann man die Kreise nicht nur ausblenden, sondern auch deaktivieren, bevor man auf das Google-Symbol klickt? – dhaval

ich sortierte es aus. #navs a { ... Anzeige: keine; } und (function() { \t ... 'display': "inline-block" }); \t \t \t} \t \t} else { \t \t \t li.removeAttr ('Stil'); lia.removeAttr ('Stil'); \t \t} \t}); }) ($); – dhaval

Listeninhalt ausblenden, bis das Symbol geklickt wurde

Antwort

Verwandte Themen