3

Не могу сделать так, чтобы при клике на .menu-icon появился меню.

Код:

$('.menu-icon').click( function(){
    if ( $('.s-menu').hasClass('show') ) {
        $('.s-menu').removeClass('show');
    } else {
        $('.s-menu').removeClass('show');
        $('.s-menu').addClass('hide');    
    }
});
*{
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
}
div{
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
}
body, html{	
	margin: 0;
	padding: 0;
	height: 100%;
}
a{
	color: #000;
	text-decoration: none;
}
ul{
	list-style-type: none;
	padding: 0;
}
.hide{
	display: none;
}
.show{
	display: block;
}
/*****Sidebar******/
.container{
	min-height: 100%;
	overflow: hidden;
	float: left;
	position: fixed;
}
.sidebar h3{
	font-family: 'Exo 2', sans-serif;
	color: #333;
	font-size: 24px;
	padding: 50px 30px 0 30px;
	margin: 0;
}
.sidebar h4{
	font-family: 'Roboto', sans-serif;
	color: #3971ff;
	font-size: 16px;
	padding-left: 30px;
	font-weight: lighter;
}
.sidebar{
	background-color: #f3f3f3;
	border-right: 1px solid #a7a7a7;
}
.s-menu{
	padding-bottom: 9999px;
	margin-bottom: -9999px;
}
.s-menu li{
	padding: 18px 0;
	padding-left: 25px;
	font-family: 'Exo 2', sans-serif;
	border-bottom: 1px solid #a7a7a7;
	width: 70%;
	margin: 0 auto;
	font-size: 16px;
}
.s-menu li:last-child{
	border: 0;
}
.s-menu a{
	color:#a7a7a7;
	transition: all 0.2s;
}
.left-line{
	width: 14px;
	height: 2px;
	background-color: #3971ff;
	margin-left: -20px;
	margin-top: -10px;
	transition: all 0.2s;
}
.active .left-line{
	width: 28px;
	transition: all 0.2s;
}
.menu-icon{
	display: none;
}
.active a{
	padding-left: 10px;
	transition: all 0.2s;
	color: #4c4c4c;
}
/******Sections*******/
.content{
	max-width: 920px;
	margin: 0 auto;
}
/******Section Header*******/
.header {
	background-color: #EAEBED;
	height: 582px;
}
.content img{
	margin: 125px;
}
.header-text{
	margin-top: -450px;
	margin-left: 450px;
}
.header-text h3{
	font-size: 30px;
	margin: 0;
	font-family: 'Exo 2',sans-serif;
	font-weight: lighter;
	color: #4c4c4c;
}
.header-text h1{
	font-size: 48px;
	font-family: 'Exo 2',sans-serif;
	font-weight: lighter;
	color: #4c4c4c;
	margin: 0;
}
.header-text h1 span{
	color: #3971ff;
}
.header-text h4{
	color: #3971ff;
	font-family: 'Roboto',sans-serif;
	font-weight: lighter;
	font-size: 16px;
	border-top: 1px solid #232323;
	border-bottom: 1px solid #232323;
	display: inline-block;
	padding:10px 15px;
}
.header-text p{
	padding: 0;
	margin: 0;
	font-family: 'Roboto',sans-serif;
	font-size: 16px;
	color: #4c4c4c;
	line-height: 28px;
	padding-bottom: 40px;
}
.header-text span{
	color: #3971ff;
}
.header-select{
	font-family: 'Roboto',sans-serif;
	color: #4c4c4c;
	margin-right: 86px;
	font-weight: bold;
	transition: all 0.2s;
	display: inline-block;
}
.header-select:hover{
	color: #3971ff;
	transition: all 0.2s;
}
.down-line{
	width: 50px;
	height: 2px;
	background-color: #3971ff;
	display: block;
	margin-top: 10px;	
	transition: all 0.3s;
	position: absolute;
}
.header-select:hover .down-line{
	width: 120px;
	transition: all 0.3s;
}
@media only screen and (max-width: 1200px) {
	.header-text h1{
		font-size: 38px;
	}
	.header-text h3{
		font-size: 22px;
	}
	.header-text h4{
		font-size: 15px;
		padding:5px 10px;
	}
	.header-text p{
		font-size: 15px;
		line-height: 23px;
		padding-bottom: 35px;
	}
	.content img {
		margin: 172px;
		max-width: 24%;
	}
}
@media only screen and (max-width: 991px) {
	.container{
		min-height: 0;
		width: 100%;
	}
	.sidebar h3{
		padding: 10px 0px 0px 20px;
	}
	.sidebar h4{
		font-size: 15px;
		margin: 5px 0;
		padding-left: 20px;
	}
	.sidebar{
		border: 0;	
	}
	.s-menu {
		padding: 0;
		margin: 0;
		margin-top: -65px;
		line-height:70px;
		text-align: right;
	}
	.left-line{
		width: 100%;
		height: 2px;
		background-color: #3971ff;
		margin-left: 0px;
		margin-top: -22px;
		transition: all 0.2s;
	}
	.s-menu li {
		border-bottom: 0;
		margin: 0 13px;
		padding: 0;
		width: auto;
		display: inline-block;
		font-size: 15px;
	}
	/******Sections******/
	.sections{
		padding-top: 71px;
	}
	.content img {
		max-width: 22%;
		margin: 116px 0 100px 60px;
		padding-top: 30px;
	}
	.header-text {
		margin-top: -300px;
		margin-left: 300px;
		padding: 0 20px;
	}
	.header-text h3 {
		font-size: 18px;
	}
	.header-text h1 {
		font-size: 30px;
	}
	.header-text h4 {
		font-size: 14px;
		padding: 4px 8px;
	}
	.header-text p {
		font-size: 14px;
		line-height: 20px;
		padding-bottom: 25px;
	}
	.header-select{
		font-size: 15px;
	}
}
@media only screen and (max-width: 820px) {
	.content img {
		max-width: 25%;
		margin: 0 auto;
		display: block;
	}
	.header-text{
		margin-top: 30px;
		margin-left: 0;
		text-align: center;
		padding: 20px 50px;
	}
	/*****Menu******/
	.sidebar h4 {
		padding-bottom: 10px;
	}
	.s-menu {
		padding: 0;
		margin: 0;
		margin-top: 0;
		text-align: left; 
		padding-left: 0;
		display: none;
	}
	.s-menu li {
		border-bottom: 0;
		margin: 20px 20px;
		padding: 0px;
		display: block;
		font-size: 15px;
	}
	.s-menu li:last-child{
		padding-bottom: 15px;
	}
	.left-line {
		width: 25px;
		height: 2px;
		margin-left: 0px;
		margin-top: 12px;
		transition: all 0.2s;
	}
	.menu-icon{
		display: block;
		position: absolute;
		right: 10px;
		top: 25px;
		cursor: pointer; 
	}
}
@media only screen and (max-width: 480px) {
	.header-text{
		padding: 10px 20px;
	}
	.header-select{
		display: block;
		margin: 20px 0;
		text-align: center;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="sidebar">
    <h3>AL-RAYHAN</h3>
    <h4>UI & UX Designer</h4>
    <img src="images/menu.png" alt="menu-icon" class="menu-icon">
    <ul class="s-menu">
      <li><a href="#">SKILLS</a>
        <div class="left-line"></div>
      </li>
      <li><a href="#">EDUCATION</a>
        <div class="left-line"></div>
      </li>
      <li><a href="#">EXPERIENCE</a>
        <div class="left-line"></div>
      </li>
      <li><a href="#">PORTFOLIO</a>
        <div class="left-line"></div>
      </li>
      <li><a href="#">BLOG</a>
        <div class="left-line"></div>
      </li>
      <li><a href="#">PRICING</a>
        <div class="left-line"></div>
      </li>
      <li><a href="#">CONTACT</a>
        <div class="left-line"></div>
      </li>
    </ul>
  </div>
</div>
<!-- Container-->

Код в JSFiddle.

1 ответ 1

3
$('.menu-icon').click( function(){
  $('.s-menu').toggle();
});

Не забудьте добавить jQuery в опциях JAVASCRIPT - FRAMEWORKS & EXTENSIONS.

6
  • Вы ведь видели .menu-icon{ display: none; }?
    – user207618
    22 фев 2017 в 21:33
  • @Other Хм, нет, не видел. А чего ж он виден в правом верхнем углу?
    – user176262
    22 фев 2017 в 21:35
  • спс большое за ответ ))) 22 фев 2017 в 21:36
  • @Other а, там еще один: .menu-icon{ display: block; ...
    – user176262
    22 фев 2017 в 21:36
  • я новичок просто немного неправильно делаю многие вещи 22 фев 2017 в 21:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.