@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');
}

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

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

Похожие вопросы