more fluid animations

This commit is contained in:
William Zhang 2017-07-13 12:30:52 -04:00
parent a45289b544
commit 7e29e32e43
7 changed files with 17 additions and 15 deletions

View File

@ -19,7 +19,7 @@
<body>
<header>
<div id="banner">
<button id="menu-toggle" class="fluid">
<button id="menu-toggle">
<i></i>
</button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>

View File

@ -19,6 +19,7 @@ header {
vertical-align: middle;
font-size: 3em;
font-weight: bold;
overflow: hidden;
}
#menu-toggle {
@ -29,7 +30,7 @@ header {
}
#menu-toggle:active {
background-color: #BDBDBD;
background-color: #e0e0e0;
}
#menu-toggle>i {

View File

@ -33,11 +33,11 @@ body {
}
.fluid {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.fluid-slow {

View File

@ -79,6 +79,7 @@
display: block;
position: fixed;
z-index: 2;
transition: all 130ms ease;
}
#menu-toggle {
display: block;

View File

@ -18,7 +18,7 @@
<body>
<header>
<div id="banner">
<button id="menu-toggle" class="fluid">
<button id="menu-toggle">
<i></i>
</button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>

View File

@ -18,23 +18,23 @@
<body>
<header>
<div id="banner">
<button id="menu-toggle" class="fluid">
<button id="menu-toggle">
<i></i>
</button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
</div>
<nav id="menu" class="fluid">
<nav id="menu">
<a class="menu-item" href="index.html">
<button class="menu-item fluid">Home</button>
<button class="menu-item">Home</button>
</a>
<a class="menu-item" href="about.html">
<button class="menu-item fluid">About</button>
<button class="menu-item">About</button>
</a>
<a class="menu-item" href="resources.html">
<button class="menu-item fluid">Resources</button>
<button class="menu-item">Resources</button>
</a>
<a class="menu-item" href="forms.html">
<button class="menu-item fluid">Forms</button>
<button class="menu-item">Forms</button>
</a>
</nav>
<div id="dome">

View File

@ -18,7 +18,7 @@
<body>
<header>
<div id="banner">
<button id="menu-toggle" class="fluid">
<button id="menu-toggle">
<i></i>
</button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>