1. Zuhause
  2. Frage und Antwort
  3. Nav bar animation

Nav bar animation

2016-09-01 4 views
1

so ist mein Problem, dass ich ein Kontrollkästchen als eine Schaltfläche, um eine Navigationsleiste Pop-up haben. Wenn Sie auf diese Schaltfläche klicken, wird die Seite abgeblendet, die Navigationsleiste erscheint und der Foucus befindet sich auf dem Menü. Sowieso. Ich habe es so gemacht, wenn man auf Play (ein Button in der Navigationsleiste) drückt, geht es an den spezifischen Punkt der Website. Wenn Sie an der Stelle der Website sind, verschwindet das Menü nicht. Du kannst also nirgends klicken. Ich will es, also klickst du auf etwas auf der Speisekarte, das Menü verschwindet und bringt dich dahin, wo du geführt wirst.Nav bar animation

Hier ist das HTML-Dokument.

<!DOCTYPE html> 
<html> 
<head> 
<link rel=stylesheet href="css.css" type="text/css" /> 
<link rel="icon" href="favicon.ico" type="image/icon"/> 
<title>Das Krankenhaus</title> 
</head> 

<body> 
<!-- start header --> 
<header id="head"> 
    <div class="something"> 
     <nav id="menu"> 
     <input type="checkbox" id="toggle-nav"/> 
     <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label> 
     <div class="box"> 
      <ul> 
      <li><a href="#play"><i class="icon-home"></i> Play</a></li> 
      <li><a href="#"><i class="icon-file-alt"></i> about</a></li> 
      <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li> 
      <li><a href="#"><i class="icon-envelope"></i> contacts</a></li> 
      </ul> 
     </div> 

     </nav> 
    </div> 



    </header> 
<!-- end header --> 


    </div> 
</section> 
<!-- end content --> 

<div class="jumbotron text-center"> 
    <div class="container"> 

    <h1>Das Krankenhuas</h1> 
    <p style="color:#888;">A game you will never escape</p> 

    </div> 
</div> 
<div class="container"> 

</div> 



<div id="h1"> 
<center> 
<h3> About The Game </h3> 

</div> 





    <div id="text"> 
<center> 
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div> 

<div id="h1"> 
<center> 
<h3> Update log</h3> 

</div> 

    <div id="text"> 
<center> 
<p> Update 1: Where it all started. 
<br> <br> 
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun. 
<br> <br> 

Update 3: fix search guard and some bugs. Interrgatoin room. </p> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div> 







<a id="play"></a> 
    <div class="row"> 
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div> 
    </div> 
</div> 
    <footer class="jumbotron text-center"> 
    <div class="container"> 
    <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p> 
    </div> 
    </footer> 


</body> 

</html>

Und hier ist das CSS.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css); 
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 

body { 
    font-family: 'Lato', sans-serif; 
    background: #353535; 
    color: #FFF; 
} 
#text { 
color: #888; 


} 

.jumbotron h1 { 
    color: #353535; 
} 
/* under play */ 
footer { 
    margin-bottom: 0 !important; 
    margin-top: 80px; 
} 
footer p { 
    margin: 0; 
    padding: 0; 
} 
span.icon { 
    margin: 0 5px; 
    color: #D64541; 
} 
h2 { 
    color: #BDC3C7; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 
.mrng-60-top { 
    margin-top: 60px; 
} 

a.animated-button:link, a.animated-button:visited { 
    position: relative; 
    display: block; 
    margin: 30px auto 0; 
    padding: 14px 15px; 
    color: #fff; 
    font-size:14px; 
    font-weight: bold; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    overflow: hidden; 
    letter-spacing: .08em; 
    border-radius: 0; 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 

} 
a.animated-button.thar-one { 
    color: white; 
    cursor: pointer; 
    display: block; 
    position: relative; 
    width: 100%; 
    margin-left: 170%; 
    border: 2px solid white; 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
    margin-bottom: 0 !important; 
    margin-top: 80px; 


} 
a.animated-button.thar-one:hover { 
    color: white !important; 
    background-color: black; 
    text-shadow: none; 

} 
a.animated-button.thar-one:hover:before { 
    bottom: 0%; 
    top: auto; 
    height: 100%; 
    margin: 0 auto; 
} 
a.animated-button.thar-one:before { 
    display: white; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    height: 0px; 
    width: 100%; 
    z-index: -1; 
    content: ''; 
    color: black !important; 
    background: black; 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 

} 

    @import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:700,300'); 
    @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css'); 

    * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }  /* fast reset */ 

    body { 
    font-family: 'Merriweather Sans', Arial, sans-serif; 
    font-size: 12px; 
    } 

    a { text-decoration: none; } 
    a:hover { text-decoration: underline; } 

    li { list-style: none; } 

    .something { margin: 0px 20% 0px 20%; } 

    #head { margin-top: 20px; } 

    #menu .box { 
    position: fixed; 
    text-align: center; 
    overflow: hidden; 
    z-index: -1; 
    opacity: 0; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    background: rgba(0,0,0,0.8); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 

    } 

    #menu ul { 
    position: relative; 
    top: 20%; 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    transform: scale(2); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    } 

    #menu li { 
    display: inline-block; 
    margin: 20px; 
    } 

    #menu li a { 
    border-radius: 3px; 
    padding: 15px; 
    border: 1px solid transparent; 
    text-decoration: none; 
    font-size: 18px; 
    color: #fff; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    } 

    #menu li a:hover { border-color: #fff; } 

    #menu li a i { 
    margin-right: 5px; 
    font-size: 24px; 
    } 
/* Box */ 
    #toggle-nav-label { 
    color: rgba(0,0,0,0.5); 
    background: white; 
    text-align: center; 
    line-height: 30px; 
    font-size: 16px; 
    display: block; 
    cursor: pointer; 
    position: relative; 
    z-index: 500; 
    width: 30px; 
    height: 30px; 
    border-radius: 10px; 
    } 

    #toggle-nav { display: none; } 

    #toggle-nav:checked ~ .box { 
    opacity: 1; 
    z-index: 400; 
    } 

    #toggle-nav:checked ~ .box ul { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    } 

    #toggle-nav:checked ~ #toggle-nav-label { 
    background: #fff; 
    color: rgba(0,0,0,0.8); 
    } 

    #content { margin: 20px 0px 20px 0px; } 

    #content h1 { 
    margin-bottom: 20px; 
    font-size: 30px; 
    } 

    #content p { 
    font-size: 14px; 
    line-height: 150%; 
    margin-bottom: 20px; 
    }

Vielen Dank!

Quelle

2016-09-01 Simen Musaus

Antwort

4

Sie haben Ihr Styling für diese Menüüberlagerung an die Checkbox-Eigenschaft in der CSS gebunden. Wenn Sie also auf das Kontrollkästchen klicken, werden einige Eigenschaften im Menü (Z-Index und Deckkraft) geändert, um es anzuzeigen. Damit es in den Standardzustand zurückfällt, in dem das Menü nicht angezeigt wird, muss dieses Kontrollkästchen deaktiviert sein (wenn Sie Ihr CSS unverändert verwenden möchten). Um dies zu tun, können Sie Javascript verwenden. Ich habe jQuery in dem unten stehenden Snippet verwendet, um die Checked-Eigenschaft Ihres Kontrollkästchens auf false zu setzen, wenn Sie auf einen Link im Menü klicken, und magisch Ihr Menü verschwindet! Prost!

(Ich sollte hinzufügen, dass diese Lösung jQuery 1.6 oder neuer benötigen würde. Das ist, wenn Prop wurde eingeführt. Wenn das ein Problem ist, gibt es große schreiben von Benutzer @Xian beim Ändern der Eigenschaft überprüft auf verschiedene Arten hier: Setting "checked" for a checkbox with jQuery?)

$(function() { 
 
    $(".box a").on("click",function() { 
 
\t  $("#toggle-nav").prop('checked', false) 
 
    }); 
 
});
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css); 
 

 
body { 
 
    font-family: 'Lato', sans-serif; 
 
    background: #353535; 
 
    color: #FFF; 
 
} 
 
#text { 
 
color: #888; 
 

 

 
} 
 

 
.jumbotron h1 { 
 
    color: #353535; 
 
} 
 
/* under play */ 
 
footer { 
 
    margin-bottom: 0 !important; 
 
    margin-top: 80px; 
 
} 
 
footer p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
span.icon { 
 
    margin: 0 5px; 
 
    color: #D64541; 
 
} 
 
h2 { 
 
    color: #BDC3C7; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
} 
 
.mrng-60-top { 
 
    margin-top: 60px; 
 
} 
 

 
a.animated-button:link, a.animated-button:visited { 
 
    position: relative; 
 
    display: block; 
 
    margin: 30px auto 0; 
 
    padding: 14px 15px; 
 
    color: #fff; 
 
    font-size:14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
    letter-spacing: .08em; 
 
    border-radius: 0; 
 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 

 
} 
 
a.animated-button.thar-one { 
 
    color: white; 
 
    cursor: pointer; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    margin-left: 170%; 
 
    border: 2px solid white; 
 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
 
    margin-bottom: 0 !important; 
 
    margin-top: 80px; 
 

 

 
} 
 
a.animated-button.thar-one:hover { 
 
    color: white !important; 
 
    background-color: black; 
 
    text-shadow: none; 
 

 
} 
 
a.animated-button.thar-one:hover:before { 
 
    bottom: 0%; 
 
    top: auto; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
a.animated-button.thar-one:before { 
 
    display: white; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    height: 0px; 
 
    width: 100%; 
 
    z-index: -1; 
 
    content: ''; 
 
    color: black !important; 
 
    background: black; 
 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
 

 
} 
 

 
    @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css'); 
 

 
    * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }  /* fast reset */ 
 

 
    body { 
 
    font-family: 'Merriweather Sans', Arial, sans-serif; 
 
    font-size: 12px; 
 
    } 
 

 
    a { text-decoration: none; } 
 
    a:hover { text-decoration: underline; } 
 

 
    li { list-style: none; } 
 

 
    .something { margin: 0px 20% 0px 20%; } 
 

 
    #head { margin-top: 20px; } 
 

 
    #menu .box { 
 
    position: fixed; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    z-index: -1; 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    background: rgba(0,0,0,0.8); 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 

 
    } 
 

 
    #menu ul { 
 
    position: relative; 
 
    top: 20%; 
 
    -webkit-transform: scale(2); 
 
    -moz-transform: scale(2); 
 
    -ms-transform: scale(2); 
 
    transform: scale(2); 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    } 
 

 
    #menu li { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    } 
 

 
    #menu li a { 
 
    border-radius: 3px; 
 
    padding: 15px; 
 
    border: 1px solid transparent; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    } 
 

 
    #menu li a:hover { border-color: #fff; } 
 

 
    #menu li a i { 
 
    margin-right: 5px; 
 
    font-size: 24px; 
 
    } 
 
/* Box */ 
 
    #toggle-nav-label { 
 
    color: rgba(0,0,0,0.5); 
 
    background: white; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    font-size: 16px; 
 
    display: block; 
 
    cursor: pointer; 
 
    position: relative; 
 
    z-index: 500; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 10px; 
 
    } 
 

 
    #toggle-nav { display: none; } 
 

 
    #toggle-nav:checked ~ .box { 
 
    opacity: 1; 
 
    z-index: 400; 
 
    } 
 

 
    #toggle-nav:checked ~ .box ul { 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 

 
    #toggle-nav:checked ~ #toggle-nav-label { 
 
    background: #fff; 
 
    color: rgba(0,0,0,0.8); 
 
    } 
 

 
    #content { margin: 20px 0px 20px 0px; } 
 

 
    #content h1 { 
 
    margin-bottom: 20px; 
 
    font-size: 30px; 
 
    } 
 

 
    #content p { 
 
    font-size: 14px; 
 
    line-height: 150%; 
 
    margin-bottom: 20px; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section> 
 
    <div> 
 
<!-- start header --> 
 
<header id="head"> 
 
    <div class="something"> 
 
     <nav id="menu"> 
 
     <input type="checkbox" id="toggle-nav"/> 
 
     <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label> 
 
     <div class="box"> 
 
      <ul> 
 
      <li><a href="#play"><i class="icon-home"></i> Play</a></li> 
 
      <li><a href="#"><i class="icon-file-alt"></i> about</a></li> 
 
      <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li> 
 
      <li><a href="#"><i class="icon-envelope"></i> contacts</a></li> 
 
      </ul> 
 
     </div> 
 

 
     </nav> 
 
    </div> 
 

 

 

 
    </header> 
 
<!-- end header --> 
 

 

 
    </div> 
 
</section> 
 
<!-- end content --> 
 

 
<div class="jumbotron text-center"> 
 
    <div class="container"> 
 

 
    <h1>Das Krankenhuas</h1> 
 
    <p style="color:#888;">A game you will never escape</p> 
 

 
    </div> 
 
</div> 
 
<div class="container"> 
 

 
</div> 
 

 

 

 
<div id="h1"> 
 
<center> 
 
<h3> About The Game </h3> 
 

 
</div> 
 

 

 

 

 

 
    <div id="text"> 
 
<center> 
 
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p> 
 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
</div> 
 

 
<div id="h1"> 
 
<center> 
 
<h3> Update log</h3> 
 

 
</div> 
 

 
    <div id="text"> 
 
<center> 
 
<p> Update 1: Where it all started. 
 
<br> <br> 
 
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun. 
 
<br> <br> 
 

 
Update 3: fix search guard and some bugs. Interrgatoin room. </p> 
 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
</div> 
 

 

 

 

 

 

 

 
<a id="play"></a> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div> 
 
    </div> 
 
</div> 
 
    <footer class="jumbotron text-center"> 
 
    <div class="container"> 
 
    <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p> 
 
    </div> 
 
    </footer>

Quelle

2016-09-01 19:27:34

+0

PS .. ich hatte google Schrift-Importen im snippet zu entfernen, da sie Probleme mit jsfiddle verursacht wurden, wenn ich mit diesem spielt. –

+0

Vielen Dank! Ich bin ein bisschen neu in diesem Coding-Zeug, wo sollte ich das Javascript setzen? In einem eigenen Dokument oder? :) –

+0

Wenn Sie jQuery noch nicht in Ihr Projekt aufgenommen haben, müssen Sie das Skript-Tag dafür hinzufügen. Sie können eine gehostete Version verwenden oder sie herunterladen und lokal speichern, wenn Sie nur das gehostete versuchen möchten Version, fügen Sie dies direkt unter Ihrem schließenden Body-Tag hinzu: '' und dann das Skript, das ich oben direkt hinzugefügt habe. –

Verwandte Themen

 Verwandte Themen