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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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