@Hikigo
Start

Как переделать меню?

Помогите понять что переписать чтобы меню при клике не открывалось с верху вниз, а выдвигалось с право на лево при нажатии кнопки.
5d9f86e17a8ba650121691.png
html

<?php
include('inc/conf.php');
include('inc/single.php');
?>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title><?php echo SITENAME; ?></title>
<meta charset="utf-8">
<meta name="keywords" content="--------------" />
<meta name="description" content="--------------------" />
<?php include('inc/single_styles.php'); ?>
<script src="js/jquery.bxslider.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery("div.hideWrap a.hideBtn").click(function(){jQuery(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
return false;
});
});
</script>
<link rel="stylesheet" media="all" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>
</head>
<body>
<div id="body_wrap">
<script type="text/javascript">
$(document).ready(function()
{
var $top1= $('#header').offset().top + 20;   
var $mid1 =  Math.floor($(window).height() / 2);
$(window).scroll(function()
{   
if ($(window).scrollTop()>$top1)   
{
$('#header').addClass('header-fix');

}
else
{
$('#header').removeClass('header-fix');
}
});
});
</script>
<script>
function open_popup(box, width, height, yt) {
if(!$(box+' iframe').length && yt) {
$(box).append('<iframe id="yt" width="'+width+'" height="'+height+'" src="//www.youtube.com/embed/'+yt+'?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>');
}
$(box+' .popup-close').html('<div class="popup-close_first normal"></div><div class="popup-close_second hover"></div>');
if(width) $(box).css({'width': width, 'margin-left': -(width/2)});
if(height) $(box).css({'height': height, 'margin-top': -(height/2)});
else $(box).css('margin-top', -($(box).height()/2));
$(box).show();
}
function close_popup(box) {
$(box).hide();
$(box+' #yt').remove();
}
$("#play").click(function(){
$(".globus-play").before(popup1);
});
function open_popup2(box, width, height, yt) {
if(!$(box+' iframe').length && yt) {
$(box).append('<iframe id="yt" width="'+width+'" height="'+height+'" src="//www.youtube.com/embed/'+yt+'?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>');
}
if(width) $(box).css({'width': width});
if(height) $(box).css({'height': height});
$(box).show();
}
</script>
<div id="header">
<div class="wrapper">
<div id="dzen"><a href="https://"><img src="images/dzen.png" /></a></div>
<div id="instagram"><a href="https://"><img src="images/instagram.png" /></a></div>
<div id="vk"><a href="https://"><img src="images/vk.png" /></a></div>
<div id="logo"><a href="/"><img src="images/logo.png" /></a></div>
<nav id="menu" class="clearfix">
<div class="wrapper"><a href="#" id="pull">&nbsp;</a></div>
<ul class="clearfix">
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
</ul>
<ul id="nav_mobile">
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/">Главная</a></li>
<?php if(!USER_LOGGED) { ?>
<li><a href="#" onclick="open_popup('#box-1')">Вход</a></li>
<li><a href="/register">Регистрация</a></li>
<?php } else { $bal = mysqli_fetch_assoc(mysqli_query($connect_db, "SELECT bal FROM t_users WHERE uid = '$u_id' LIMIT 1")); ?>
<li><a href="/"><?php echo $u_login.', '.$bal['bal']; ?> .</a></li>
<li><a href="//exit">Выход</a></li>
<?php } ?>
</ul>
</nav>
<div id="login">
<?php if(!USER_LOGGED) { ?>
<a class="button green_b" href="#" onclick="open_popup('#box-1')">Вход</a>
<a class="button green_b" href="/register">Регистрация</a>
<?php } else { ?>
<a class="button green_b" href="/cabinet/exit">Выход</a>
<a class="button green_b btnover" href="/"><?php echo $u_login.', '.$bal['bal']; ?></a>
<?php } ?>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="box-1" class="pop-up-auth"><div class="pop-up-backgound" onclick="close_popup('#box-1')"></div><div class="popup-close" onclick="close_popup('#box-1')"></div>
<div id="auth-block">	
<form>
<table class="form" width="100%" border="0" align=center cellpadding="0" cellspacing="0">
<tr>
<td><h3>Вход</h3></td>
</tr>
<tr>
<td class="no_border" style="padding-top:15px;"><input type="text" id="u_login" class="username inputbox form6" style="padding: 14px 12px 12px 30px !important;" alt="username" size="25" placeholder="Ваш логин" /></td>
</tr>
<tr>
<td class="no_border"><input id="u_pass" type="password" class="passwd inputbox form6" size="25" style="padding: 14px 12px 12px 30px !important;" alt="password" placeholder="Ваш пароль" /></td>
</tr>
<tr>
<td class="no_border"><input type="button" id="submit_login" class="button green_b" value="Войти" style="margin-top:0;" /></td>
</tr>
<tr>
<td class="no_border"><a href="/lostpassword" >Забыли пароль?</a> <span style="color:#7baa3e;">|</span> <a href="/register" >Регистрация</a></td>
</tr>
</table>
</form>
</div>
</div>



CSS

#menu ul#nav_mobile {
display: none;
font-size: 14px;
}
#menu ul li {
background: none;
display: list-item;
float: left;
list-style: outside none none;
font-size: 1.125em;
color: #333;
font-family: "Open Sans Light", Tahoma, Arial, sans-serif;
margin: 0 5px;
}
#menu ul li a {
color: #fff;
display: block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
#menu ul li a:hover {
background-color: #91d280;
text-decoration: none;
color: #fff !important;
}
#menu ul li a:hover {
   border-radius: 15px;
background-color: rgba(65, 105, 225, 0.65);
text-decoration: none;
color: #fff !important; 
}
#menu2 {
position: relative;
float: left;
margin: 20px 0 0 50px;
}
#menu2 ul {
color: #fff;
display: block;
list-style: outside none none;
margin: 0;
padding: 0;
}
#menu2 ul#nav_mobile {
display: none;
font-size: 16px;
}
#menu2 ul li {
background: none;
display: list-item;
float: left;
list-style: outside none none;
font-size: 1.125em;
color: #333;
font-family: "Open Sans Light", Tahoma, Arial, sans-serif;
margin: 0 5px;
}
#menu2 ul li a {
color: #fff;
display: block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
#menu2 ul li a:hover {
background-color: #91d280;
text-decoration: none;
color: #fff !important;
}
.header-fix #menu2 ul li a {
color: #333;
}



JS

$(function() {
var pull = $('#pull');
menu = $('#nav_mobile');
menuHeight = menu.height();
$('html').click(function() {
if (menu.is(':visible')) {
menu.hide();
}
});
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
e.stopPropagation();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}

  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 1
@igumenov
Нужно сделать transform: translateX(-200px)
200- ширина меню
само же меню сделать всегда видимым
например position: absolute; top:0; left: 100%;
Тогда смещая body_wrap мы сможем увидеть меню
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Монографик Москва
от 60 000 до 100 000 руб.
Frogogo Москва
от 60 000 до 80 000 руб.
Panda Media Нижний Новгород
от 35 000 руб.
22 нояб. 2019, в 13:46
3000 руб./за проект
22 нояб. 2019, в 13:22
10000 руб./за проект
22 нояб. 2019, в 13:19
100000 руб./за проект