1
Ich habe Probleme, das Side-Menü andere Elemente aus dem Weg schieben (durch die gleiche Breite des Seitenmenüs) beim Umschalten des Seitenmenüs. Ich möchte, dass das Seitenmenü die angrenzenden Elemente aus dem Weg schiebt, wenn es hineingleitet. Vielen Dank, hier ist mein Code.Wie kann ich mein Side-Menü drücken andere Elemente auf Toggle?
$(document).ready(function() {
\t $("#hamburger").click(function() {
\t \t $("header nav").animate({width: 'toggle'});
\t });
\t $("header nav").mouseleave(function() {
\t \t $("header nav").animate({width: 'toggle'});
\t });
});/* Universal Styles */
* {
\t box-sizing: border-box;
}
body {
\t text-align: center;
}
a {
\t text-decoration: none;
\t color: inherit;
}
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
\t margin: 0;
\t padding: 0;
}
/* Cross Styles */
aside,
.navBlock {
\t font-family: 'Bungee Inline', cursive;
}
/* Header Styles */
.logo {
\t width: 150px;
\t cursor: pointer;
\t transition: all .2s;
\t float: left;
\t margin-bottom: 10px;
}
nav,
header{
\t overflow: auto;
\t width: 100%;
}
#hamburger {
\t float: right;
\t transition: all .2s;
\t cursor: pointer;
}
/* Navigation Styles */
\t header nav {
\t \t position: absolute;
\t \t width: 50%;
\t \t top: 0;
\t \t height: 100%;
\t \t background-color: #354551;
\t \t margin: 0;
\t \t box-shadow: inset 0px 0px 12px 2px rgba(0,0,0,0.75);
\t \t display: none;
\t \t z-index: 100;
\t }
\t .navBlock {
\t \t background-color: #354551;
\t \t text-transform: uppercase;
\t \t font-size: 2em;
\t \t color: white;
\t \t letter-spacing: 3px;
\t border: none;
\t cursor: pointer;
\t line-height: 175%;
\t transition: all .2s;
\t }
\t header nav ul {
\t \t box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
\t \t margin-top: 50%;
\t \t border-top: 1px dashed lightgrey;
\t \t border-bottom: 1px dashed lightgrey;
\t }
/* Profiles Styles */
aside ul,
aside li,
aside {
\t overflow: auto;
}
aside {
\t background-color: #90afc5;
\t box-shadow: inset 0px 20px 9px -22px #000;
\t color: #eef3f6;
\t font-size: 1.5em;
\t letter-spacing: 2px;
\t text-shadow: 0px 1px 1px #4d4d4d;
\t width: 100%;
}
aside li {
\t display: inline;
}
aside img {
\t border-radius: 100%;
\t transition: all .2s;
}
/* Footer Styles */
footer {
\t font-family: 'Oswald', cursive;
\t letter-spacing: 1px;
\t font-size: .9em;
\t height: 25px;
\t background-color: #abc3d3;
\t color: #2c4354;
}
footer span {
\t line-height: 25px;
}
/* Showcase */
main h4 {
\t margin-top: 30px;
\t color: white;
\t font-size: 2em;
\t letter-spacing: 2px;
\t text-shadow: 0px 1px 1px #4d4d4d;
\t font-family: 'Bungee Inline', cursive;
\t border: 10x dashed lightgray;
\t box-shadow: 0px -20px 9px -22px #000;
}
.webShowcase img,
.logoShowcase img {
\t width: 80%;
\t margin: 50px auto;
\t transition: all .3s;
\t border: 1px solid lightgrey;
}
.webShowcase h4 {
\t background-color: #ffbb00;
\t margin: 0;
}
.webShowcase ul,
.logoShowcase ul {
\t margin-top: 30px;
\t text-align: center;
}
.webShowcase ul,
.webShowcase li,
.webShowcase,
.logoShowcase,
.logoShowcase li,
.logoShowcase ul {
\t overflow: auto;
}
.webShowcase,
.logoShowcase {
\t width: 100%;
}
.logoShowcase h4 {
\t background-color: #aebd38;
\t margin: 0;
}
/* Effects */
aside img:hover,
.logo:hover,
.navBlock:hover,
#hamburger:hover,
main img:hover {
\t opacity: .5;
}
/* Tablet View */
@media only screen and (min-width: 767px) {
\t aside ul {
\t \t margin-bottom: 10px;
\t }
}
/* Computer View */
@media only screen and (min-width: 1200px) {
\t .logo {
\t \t width: 250px;
\t }
\t #hamburger {
\t \t content: url("../media/img/hamburgerResized.png");
\t }
\t header nav {
\t \t width: 25%;
\t }
\t .webShowcase img,
\t .logoShowcase img {
\t \t width: 30%;
\t \t display: inline-block;
\t }
\t .webShowcase li,
\t .webShowcase,
\t .webShowcase ul,
\t .logoShowcase,
\t .logoShowcase li,
\t .logoShowcase ul {
\t \t overflow: auto;
\t }
\t .webShowcase li,
\t .logoShowcase li {
\t \t display: inline;
\t \t margin: 0 10px;
\t \t padding: 0;
\t }
\t .webShowcase ul,
\t .logoShowcase ul {
\t \t margin: 0;
\t \t padding: 0;
\t }
\t .webShowcase ul:nth-child(odd) {
\t \t background-color: #ffcf4d;
\t }
\t .webShowcase ul:nth-child(even) {
\t \t background-color: white;
\t }
\t .logoShowcase ul:nth-child(odd) {
\t \t background-color: #c3d062;
\t }
\t .logoShowcase ul:nth-child(even) {
\t \t background-color: white;
\t }
}<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <title>Alexander Palermo-Wylde | Portfolio</title>
\t \t <link href='https://fonts.googleapis.com/css?family=Sigmar+One|Seymour+One|Monofett|Faster+One|Rye|Eczar|Bungee+Inline|Miltonian+Tattoo|Oswald' rel='stylesheet' type='text/css'>
\t \t <link href="../../css/normalize.css" rel="stylesheet" type="text/css">
\t \t <link href="../../css/main.css" rel="stylesheet" type="text/css">
\t \t <meta content="index, follow" name="robots">
\t <meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<meta content="An awesome portfolio. Nuff said." name="Description">
\t <meta content="portfolio, freelance, freelancer, web design, web development, alexander palermo-wylde, alexander pw" name="Keywords">
\t </head>
\t <body>
\t \t <header>
\t \t \t <a href="../../index.html"><img class="logo" src="../../media/img/logo.png" alt="Alexander Palermo-Wylde's logo"></a>
\t \t \t <img id="hamburger" src="../../media/img/hamburger.png" alt="three line navigation">
\t \t \t <nav>
\t \t \t \t <ul>
\t \t \t \t \t <li class="navBlock navHome"><a href="../../index.html">home</a></li>
\t \t \t \t \t <li class="navBlock navAbout"><a href="../pages/about/index.html">about</a></li>
\t \t \t \t \t <li class="navBlock navContact"><a href="../pages/contact/index.html">contact</a></li>
\t \t \t \t \t <li class="navBlock navResume"><a href="../pages/resume/index.html">resume</a></li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t \t <main>
\t \t \t \t <section class="webShowcase">
\t \t \t \t \t <h4>Websites</h4>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t </section>
\t \t \t \t <section class="logoShowcase">
\t \t \t \t \t <h4>Logos</h4>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t \t <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t </section>
\t \t \t </main>
\t \t \t <aside>
\t \t \t \t <h4>Check me out on─</h4
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#"><img class="profiles" src="../../media/img/github.png" alt="Alexander Palermo-Wylde's GitHub profile link"></a></li>
\t \t \t \t \t </div>
\t \t \t \t \t <li><a href="#"><img class="profiles" src="../../media/img/codepen.png" alt="Alexander Palermo-Wylde's CodePen profile link"></a></li>
\t \t \t \t \t </div>
\t \t \t \t \t <li><a href="#"><img class="profiles" src="../../media/img/linkedin.png" alt="Alexander Palermo-Wylde's LinkedIn profile link"></a></li>
\t \t \t \t \t </div>
\t \t \t \t \t <li><a href="#"><img class="profiles" src="../../media/img/dribble.png" alt="Alexander Palermo-Wylde's Dribble profile link"></a></li>
\t \t \t \t \t </div>
\t \t \t \t \t <li><a href="#"><img class="profiles" src="../../media/img/upwork.png" alt="Alexander Palermo-Wylde's Upwork profile link"></a></li>
\t \t \t \t \t </div>
\t \t \t \t \t <li><a href="#"><img class="profiles" src="../../media/img/fiverr.png" alt="Alexander Palermo-Wylde's Elance profile link"></a></li>
\t \t \t \t \t </div>
\t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </aside>
\t \t </header>
\t \t <footer>
\t \t \t <span>©Alexander Palermo-Wylde</span>
\t \t </footer>
\t <script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
\t <script src="../../js/main.js"></script>
\t </body>
</html>
Vielen Dank! –
Gern geschehen! :) –