1
У меня возникли проблемы с тем, чтобы сделать боковое меню нажатием других элементов в сторону (по той же ширине бокового меню) при переключении бокового меню. Я хочу, чтобы боковое меню вытолкнуло соседние элементы в сторону, пока он скользит. Большое вам спасибо, вот мой код.Как заставить мое боковое меню нажимать другие элементы при переключении?
$(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>
Большое вам спасибо! –
Добро пожаловать! :) –