Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: При нажатие кнопки меню, менялось страница DIV блоках, все это локально будет работать. Заранее большое спс!

Здравствуйте!!! Помогите сделать на HTML. Я чайник в этом деле. Заглянул в этот форум(если честно в первые) мне очень понравился здесь, всем репост от меня. Сама суть: При нажатие кнопки меню, менялось страница DIV блоках, все это локально будет работать. Заранее большое спс!!!
Ответ: спосибо за отклики. я хотел бы написать js. Js мне темный лес.

Добавлено через 8 минут
если корректирую свой вопрос. Я нажимаю на кнопку меню, то тогда на отдельный див блоке появляется отдельный html страница(вызывается. например 1.html comp.html) этим я хочу делать электронный учебник плиз помогите

Вам также можеть быть интересно:

Кнопочная ссылка. Баттон
Скопировать спойлер
Выпадение блока див
Ниспадающее меню
Градиент
Вопрос: Прыгает кнопка меню при наведении

прыгает кнопка меню при наведении на нее как это убрать

вот сам сss
Ответ: плюс при наведении сам сайт сдвигается

ошибку нашел там были падинги при ховере которые там не нужны
Но блин теперь заметил маленькую полосу под кнопками меню не вижу почему она появилась самое интересное на главной ее нет а на остальных есть

Добавлено через 11 минут
исправил все ... 2я ошибка была в том что иконку которую ставлю на кнопку поднимал как бы ее

Добавлено через 11 секунд
тему можено закрыть
Вопрос: На iphone не работает галерея и кнопка меню

Недавно начал изучать html/js/css.

Пытаюсь разработать сайт. Он доступен по ссылке : [del] .
Один мой знакомый обнаружил что на iphone не работает кнопка меню и кнопки галереи.
На macOS(Safari) всё работает и в других браузерах кажется тоже всё хорошо.

У меня самого нет техники Apple и я не могу понять причин неисправности.

(код пишу без библиотек и прочих дополнений, ещё не доучил до такого уровня.)

HTML:
HTML5
1
2
3
4
5
6
 <div id="mini-galery">
            <div id="picture" class="min-gal">
                <div id="btn-l"   class="min-gal">в—Ѓ</div>
                <div id="btn-r"   class="min-gal">в–·</div>
            </div>
    </div>
JS:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (e.className == "min-gal") {//mini-galery
        var img = document.getElementById("picture").style.backgroundImage ;
        var p = img.indexOf(".jpg");
        img = img.substring(p-1,p);
        if (e.id == "btn-r") {
            if(img > 0){
                document.getElementById("picture").style.backgroundImage = "url(src/pic/section3/gal"+(img-1)+".jpg)";
            }else{
                document.getElementById("picture").style.backgroundImage = "url(src/pic/section3/gal8.jpg)";
            }
        }
        if (e.id == "btn-l") {
            if(img < 8){
                document.getElementById("picture").style.backgroundImage = "url(src/pic/section3/gal"+(img-(-1))+".jpg)";
            }else{
                document.getElementById("picture").style.backgroundImage = "url(src/pic/section3/gal0.jpg)";
            }
        }
    }
CSS:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body #mini-galery{
    
    touch-action: unset;
    display: none;
    min-height: 700px;
    background: black;
}
.min-gal{
    min-height: 700px;
    height: 100%;
    font-size: 60px;
    color: rgba(255, 255, 255, 0.7);
}
#picture{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: url(src/pic/section3/gal0.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#btn-l{
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: center;
    width: 50%;
}
#btn-r{
    
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: right;
    align-items: center;
    width: 50%;
}
CSS: дополнительно...
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
html{
    -webkit-appearance: none;
   position: fixed; 
   min-width: 100% !important;
   max-width: 100% !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
 
    -ms-overflow-style: none;
}
html::-webkit-scrollbar { 
    display: none; 
}
body{
    outline: none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
    width: 100% !important;
    margin: 0px 0px 0px 0px;
    padding:  0px 0px 0px 0px;
    background: white;
}
Ответ:
Сообщение от Leroy_Steelword
не поверите, но заработало
Это чудо!

А если серьезно, то установите для div'ов пустой атрибут onclick="" и, как контрольный, задайте им стиль "cursor:pointer".
Вопрос: Как сделать всю площадь кнопки меню ссылкой?

Как сделать всю площадь кнопки меню ссылчной, если она не полностью заключена в тег "а"? Пытался сделать элемент а блочным и дать ему размеры кнопок, но что-то не получается...

 Комментарий модератора 
Один вопрос - одна отдельная тема!
Ответ:
Сообщение от mrtoxas
Сделайте ссылку блочной. Уберите padding у элемента списка и задайте его ссылке.
именно так и делал. Сейчас еще раз попробую заново.

Добавлено через 8 минут
Вопрос снимаю. Работает. Почему не получалось - не знаю... Возможно опять не внимательность, где-то в синтаксисе были помарки...
Вопрос: Как выделить(цветом) активную кнопку меню?

Добрый день. Делаю сайт несколько страниц. Меню находится на странице "heаder.php" и состоит из нескольких кнопок. В каждую страницу это меню вставляется кодом
(галка ?php include("header.php");?галка) и при листании страниц все клавиши меню одинаковые по цвету.
Ведь получается, что в каждую страницу вставляется одно и то же меню. Поэтому и применить изменение цвета никак не придумаю. Нужно, чтобы в зависимости от того, какая клавиша была нажата- меняла цвет эта клавиша, когда страница откроется.


Как сделать, чтобы при включении соотв. страницы, соответствующая кнопка меню стала другим цветом? Это бы желательно сделать средствами html и сss. Чтоб понятно было мне.
Ответ:
Может быть, но обвинять меня в трепе не по делу, тоже не стоит, тем более с формулировкой "ничего по делу". Костыльные решения не потому что они твои (они по сути и мои тоже), а потому что архитектура такая, как мне кажется. Так что не знаю чем заслужил такую оценку своих постов.

Телепатить все-равно нужно, потому что ТС ничего и не сообщил толком о своей задаче. ;) Но, исходя из подписи, ты тоже телепатией увлекаешься. =) Так что спорить и критиковать друг друга нет смысла. Мы все телепаты, если задуматься.

Вопрос: Не пойму почему не работает функция кнопки входа на сайт

Не работает функция кнопки входа на сайт при наведении на нее путь следующий javascript:// при нажатии ничего не происходит.
код в форме:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?php
include('conf.php');
ini_set('session.use_cookies', 'On');
ini_set('session.use_trans_sid', 'Off');
session_set_cookie_params(604800000, "/", SITE, false, false);
session_start();
if(!empty($_SESSION['uid']) && !empty($_SESSION['login']) && !empty($_SESSION['pass'])) {
define('USER_LOGGED',true);
$u_id=intval($_SESSION['uid']);
$u_login=mysqli_real_escape_string($connect_db, $_SESSION['login']);
} else { define('USER_LOGGED',false); }
if(getenv('HTTP_CLIENT_IP') && strcasecmp(getenv('HTTP_CLIENT_IP'),'unknown'))
$ip=getenv('HTTP_CLIENT_IP');
elseif(getenv('HTTP_X_FORWARDED_FOR') && strcasecmp(getenv('HTTP_X_FORWARDED_FOR'), 'unknown'))
$ip=getenv('HTTP_X_FORWARDED_FOR');
elseif(getenv('REMOTE_ADDR') && strcasecmp(getenv("REMOTE_ADDR"), 'unknown'))
$ip=getenv('REMOTE_ADDR');
elseif(!empty($_SERVER['REMOTE_ADDR']) && strcasecmp($_SERVER['REMOTE_ADDR'], 'unknown'))
$ip=$_SERVER['REMOTE_ADDR'];
else{$ip='unknown';}
if($ip!='unknown'){
$ip=preg_replace("#[^0-9]+#i",'',$ip);
$time=time();
$past=time()-600;
$result=mysqli_query($connect_db, "SELECT last FROM t_online WHERE ip='".$ip."'");
if(mysqli_num_rows($result)!=0){ mysqli_query($connect_db, "UPDATE t_online SET last='".$time."', uid='".$u_id."' WHERE ip='".$ip."' LIMIT 1"); }
else{
mysqli_query($connect_db, "INSERT INTO t_online (uid,ip,last) VALUES ('".$u_id."','".$ip."','".$time."')"); }
if(substr($time,9,1)==0){ mysqli_query($connect_db, 'DELETE FROM t_online WHERE last<'.$past); }
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="keywords" content="<?php echo $pkey; ?>" />
<meta name="description" content="<?php echo $pdesc; ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $pname; ?></title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="/sky-form/css/sky-forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet" type="text/css" media="screen">
<link href="/css/yamm.css" rel="stylesheet" type="text/css">
<link href="/css/magnific-popup.css" rel="stylesheet" type="text/css">
<link href="/css/st.css" rel="stylesheet" type="text/css">
<script src="/js/jquery.min.js"></script>  
</head>
<body>
<div class="fullwrapper">
<div class="fullcontent">
<div class="navbar navbar-default navbar-static-top yamm">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Меню</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<?php
if(USER_LOGGED) {
$nb = mysqli_fetch_assoc(mysqli_query($connect_db, "SELECT bal FROM t_users WHERE uid='$u_id'")); $nbal = $nb['bal'];
} ?>
<li class="nvl">
<a href="/">Главная</a>
</li>
<li class="nvl">
<a href="/games">История побед</a>
</li>
<li class="nvl">
<a href="/offer">Правила</a>
</li>
<li class="nvl">
<a href="/contacts">Контакты</a>
</li>
<?php if(!USER_LOGGED) { ?>
<li class="nvl dropdown" style="float:right">
<a href="#" class=" dropdown-toggle" data-toggle="dropdown"><i class="fa fa-lock" style="margin-right: 5px;"></i> Вход</a>
<div class="dropdown-menu dropdown-menu-right dropdown-login-box animated fadeInUp">
<form role="form">
<h4>Вход</h4>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" id="u_login" class="form-control" placeholder="Ваш логин">
</div>
<br />
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" id="u_pass" class="form-control" placeholder="Ваш пароль">
</div>
<center><a href="javascript://" id="submit_login" class="btn btn-theme-bg">Войти</a></center>
<div class="clearfix"></div>
<hr />
<p><center><a href="/register">Регистрация</a>&nbsp;&nbsp;&nbsp;<a href="/lostpassword">Восстановление</a></center></p>
</div>
</form>
</div>
</li>
<?php } else { ?>
<li class="nvl dropdown" style="float:right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $u_login.', <font id="ubal">'.$nbal.'</font> руб.'; ?> <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/profile">Профиль</a></li>
<li><a href="/cash">Средства</a></li>
<li><a href="/refs">Рефералы</a></li>
<li><a href="/exit">Выход</a></li>
</ul>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div class="divide30"></div>
<div class="container container_main">
код с функцией:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</div>
<div class="divide30"></div>
</div>
<footer class="footer-light-1">
<div class="footer-copyright text-center">
<a href="http://webupper.ru" title="Разработка сайтов и PHP скриптов" target="_blank">WebUpper CMS</a>
</div>
</footer>
<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/notif.js" type="text/javascript"></script>
<script src="/js/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.sticky.js"></script>
<script src="/js/jquery.stellar.min.js" type="text/javascript"></script>
<script src="/js/waypoints.min.js"></script>
<script src="/js/jquery.counterup.min.js" type="text/javascript"></script>
<script src="/js/wow.min.js" type="text/javascript"></script>
<script src="/js/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="/js/custom.js" type="text/javascript"></script>
</div>
<?php if (!USER_LOGGED) { ?>
<script type="text/javascript">
$(document).ready(function () {
$('#submit_login').click(function(){
var login = $('#u_login').val();
var pass = $('#u_pass').val();
$.ajax({
type: 'POST',
url: 'http://<?php echo SITE; ?>/actions/log.php',
data: {'login': login, 'pass': pass},
cache: false,
success: function(result){
if (result == '0') {
$.jGrowl('Неверный логин или пароль', { theme: 'growl-error' });
}
if (result == '1') {
$(location).attr('href','/');
}
if (result == '2') {
$.jGrowl('Попробуйте войти позднее', { theme: 'growl-error' });
}
if (result == '3') {
$.jGrowl('Не введён логин или пароль', { theme: 'growl-error' });
}
if (result == '4') {
$.jGrowl('Вы уже вошли', { theme: 'growl-error' });
}
}
});
});
});
</script>
<?php } ?>
</body>
</html>
код с файла log.php:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
include('../inc/conf.php');
ini_set('session.use_cookies', 'On');
ini_set('session.use_trans_sid', 'Off');
session_set_cookie_params(604800000, "/", SITE, false, false);
session_start();
if (isset($_SESSION["uid"])){ echo "4"; exit; }
if(isset($_POST['login']) && isset($_POST['pass'])){
if (!empty($_POST['login']) && !empty($_POST['pass'])) {
$dt = time();
$pdt = $dt + 300;
$ip = $_SERVER['REMOTE_ADDR'];
$login = mysqli_real_escape_string($connect_db, $_POST['login']);
$pass = mysqli_real_escape_string($connect_db, $_POST['pass']);
$user = mysqli_fetch_assoc(mysqli_query($connect_db, "SELECT uid,log,pas FROM t_users WHERE log='$login' AND pas='$pass';"));
$c = mysqli_fetch_assoc(mysqli_query($connect_db, "SELECT c FROM t_login WHERE ip='$ip'"));
$count = intval($c['c']);
if ($count > 10) { if ($count < $dt) { mysqli_query($connect_db, "UPDATE `t_login` SET `c` = '1' WHERE ip='$ip'"); $count = '1'; } else { echo '2'; exit; } }
if(!empty($user)) {
mysqli_query($connect_db, "DELETE FROM t_login WHERE ip='$ip'");
session_unset();
$_SESSION['uid']=$user['uid'];
$_SESSION['login']=$user['log'];
$_SESSION['pass']=$user['pas'];
mysqli_query($connect_db, "UPDATE `t_users` SET `last` = '$dt' WHERE uid = '$user[uid]'");
echo '1';
} else {
if ($count == 0) { mysqli_query($connect_db, "INSERT INTO `t_login` (ip,c) VALUES ('$ip','1')"); }
if ($count > 0 && $count < 10) { mysqli_query($connect_db, "UPDATE `t_login` SET `c` = `c`+1 WHERE ip='$ip'"); }
if ($count == 10) { mysqli_query($connect_db, "UPDATE `t_login` SET `c` = '$pdt'"); }
echo '0';
}
} else { echo '3'; }
} else { echo '3'; }
?>
Ответ: спасибо, буду знать
Вопрос: Кнопки меню. CSS

Доброго времени суток. Как сделать так чтобы при нажатии на любую кнопку меню остальные кнопки становились не активны и изменяли цвет, т.е. так чтобы нельзя было ими воспользоваться, но они оставались видны и отображались другим цветом? Как изменить цвет той кнопки которую нажали?
Смог реализовать так что не нажатые кнопки просто исчезают, а это не совсем удобно для пользователя.
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<style> 
 ul { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     width: 210px; 
     height: 50px; 
     border-bottom: 2px solid #ccc; 
     border-left: 2px solid #ccc;; 
     border-top: 2px solid #ccc;; 
     font-size: 16px; 
     border: 1px solid #ccc; 
     color:#000; 
     text-align: center; 
     vertical-align: central; 
     cursor: pointer; 
     z-index: 999; 
     } 
 
 ul li { 
     position: relative; 
     height: 50; 
     text-align: center; 
     } 
    
 li ul { 
     position: absolute; 
     bottom: 210px; 
     top: 70px; 
     display: none; 
     border-bottom: 2; 
     } 
    
 ul li a { 
     display: block; 
     text-decoration: none; 
     color: #000; 
     background: #fff; 
     padding: 5px; 
     border: 1px solid #ccc; 
     border-bottom: 2; 
     height: 40; 
     } 
    
     li:hover ul { 
     display: block; 
     }   
    
     ul:hover li { 
     background-color:#CFF;  
     }   
    
     ul li a:hover { 
     background:#CFF; 
     } 
    
     ul li a:last-chid { 
         border-bottom: 10px solid black; 
         border:#33C; 
 } 
 </style> 
 
 <html> 
 <head> 
 <meta charset='utf-8'> 
 </head> 
 <body> 
 <table border='0' align='center'> 
 <tr> 
 <th> 
 <ul> 
     <li id='id_load_file'> 
     <a href='/send_file' target='iframe_down' onClick='off(1);'>Загрузка ПО</a> 
     </li> 
 </ul>  
 </th> 
 
 <th> 
 <ul> 
     <li id='id_tech_comm'> 
     <a href='/teh_comand' target='iframe_down'  onClick='off(2);'>Технологические команды</a> 
     </li> 
 </ul>  
 </th> 
 <th> 
 <ul> 
     <li id='id_table_param'> 
     <a href='/table_param' target='iframe_down'  onClick='off(3);'>Таблица параметров</a> 
     </li> 
 </ul> 
 </th> 
 <th> 
 <ul>     
     <li id='id_plan_zad'> 
     <a href='/plan_zad' target='iframe_down'  onClick='off(4);'>Плановые задания</a> 
     </li> 
 </ul> 
 </th> 
 <th> 
 <ul>     
     <li id='id_ust_chastoti'> 
     <a href='/freq_page' target='iframe_down'  onClick='off(5);'>Установка частоты</a> 
     </li> 
 </ul> 
 </th> 
 </tr> 
 </table> 
 
 <div id='down_frame' style='left: 0%; position: absolute; top: 15%; width: 100%; height: 90%;'> 
 <iframe src='' name='iframe_down' width='100%' height='80%' frameborder='0'> 
 </iframe> 
 </div>   
 
 <div id='podval_frame' style='left: 0%; position: absolute; top: 90%; width: 100%; height: 70%;'> 
 <iframe src='/p_out' name='iframe_podval' width='100%' height='70%' frameborder='0'> 
 </iframe> 
 </div> 
 
 </body>  
 </html> 
 
 <script> 
 function off(index) 
 { 
     if (index === 1) 
     { 
         document.getElementById('id_tech_comm').style.visibility = 'hidden'; 
         document.getElementById('id_table_param').style.visibility = 'hidden'; 
         document.getElementById('id_plan_zad').style.visibility = 'hidden'; 
         document.getElementById('id_ust_chastoti').style.visibility = 'hidden';     
     } 
     if (index === 2) 
     { 
         document.getElementById('id_load_file').style.visibility = 'hidden'; 
         document.getElementById('id_table_param').style.visibility = 'hidden'; 
         document.getElementById('id_plan_zad').style.visibility = 'hidden'; 
         document.getElementById('id_ust_chastoti').style.visibility = 'hidden'; 
     } 
     if (index === 3) 
     { 
         document.getElementById('id_tech_comm').style.visibility = 'hidden'; 
         document.getElementById('id_plan_zad').style.visibility = 'hidden'; 
         document.getElementById('id_ust_chastoti').style.visibility = 'hidden';     
         document.getElementById('id_load_file').style.visibility = 'hidden'; 
     } 
     if (index === 4) 
     { 
         document.getElementById('id_load_file').style.visibility = 'hidden'; 
         document.getElementById('id_table_param').style.visibility = 'hidden'; 
         document.getElementById('id_ust_chastoti').style.visibility = 'hidden'; 
         document.getElementById('id_tech_comm').style.visibility = 'hidden'; 
     } 
     if (index === 5) 
     { 
         document.getElementById('id_load_file').style.visibility = 'hidden'; 
         document.getElementById('id_table_param').style.visibility = 'hidden'; 
         document.getElementById('id_tech_comm').style.visibility = 'hidden'; 
         document.getElementById('id_plan_zad').style.visibility = 'hidden'; 
     } 
 
 } 
 
 </script> 
Ответ: Mr_Progger, в 25 строке идёт проверка как в jq, если параметром передан элемент, то использовать елемент, а если строка, то найти всё по этому селектору(строке)
Вопрос: Работа с меню. При клике на кнопке меню или вне его, меню должно закрываться

Добрый вечер! Изучаю JQuery. Вот ради развития решил написать меню, практически такое же как на Хабре.
Два дня ломаю голову над тем, как объединить два метода в один. Суть в том чтоб при клике на кнопку меню или при клике вне области меню, меню должно закрываться.

По отдельности это сделать получилось, а вот объединить не получается.


Код HTML
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<section class="content">
        <div class="container">
            <div class="wrapper_menu">
                <div id="navbar_overlay" class="overlay hidden"></div>
                <div class="left_menu">
                    <a href="#" id="top_nav"><span class="fa fa-bars fa-5x" id="menu-icon"></a>
                </div>
                
                <div class="menu_tab " >
                    <div class="sub_menu" id="sub_menu">
                            <div class="title">Разделы</div>
                            <form class="search_sub">
                                <input type="text" name="search" placeholder="Search..">
                            </form>
                            <hr/>
                    </div>  
                </div>
            </div>
                
        </div>
    </section>
Код JQ

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
        $(".left_menu").click(function() {
            
            $('.menu_tab').toggle();
            var docHeight = $(document).height();
            $("body").append("<div id='overlay'></div>");
            $("#overlay")
                .height(docHeight)
                .css({
                     'opacity' : 0.4,
                     'position': 'absolute',
                     'top': 0,
                     'left': 0,
                     'background-color': 'black',
                     'width': '100%',
                     'z-index': 5000
                }); 
        });
        $(document).on('click', function(e) {
            if (!$(e.target).closest(".wrapper_menu").length) {
                $('.menu_tab').hide();
                $("#overlay").remove();
 
                
            }
            return false;
            e.stopPropagation();
        });

Так же прилагаю сам архив, со всеми файлами.

Буду признателен за помощь в написании кода или же за помощь в продумывании логики)).
Ответ: Danzel, javascript код можно вставлять куда угодно, хоть в ссылку, хоть в адресную строку. void(0) - это пустое действие, которое ничего не делает. Заглушка "#", на самом деле это якорная ссылка на сам документ. Некоторые вместо "#" пишут "javascript:" Либо "javascript:void(0)";
В вашем случае можно вообще тег a убрать, вместо него поставить div или span, а в стилях добавить свойство
cursor:pointer;, чтоб изменялся курсор при наведении.
Вопрос: Масштабирование кнопок меню

Господа!

1.
Пытаюсь сделать кнопки меню, но при масштабировании в браузере, текст увеличивается в размерах, а кнопки нет. Соответственно выглядит это некрасиво.

Код HTML5
1
2
3
4
5
6
7
8
<nav>
    <ul class="menu">
        <a href="index.html"><li class="menu">Главная</li></a>
        <a href="articles.html"><li class="menu">Статьи</li></a>
        <a href="info.html"><li class="menu">Для клиентов</li></a>
        <a href="contacts.html"><li class="menu">Контакты</li></a>
    </ul>
</nav>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
li.menu
{
    display: inline-block;
    border: 3px solid grey;
    border-radius: 10%;
    padding: 1%;
    background-color: lightgrey;
    width: 7%;
    height: 5%;
}
 
li.menu:hover
{
    background-color: grey;
}
Почему так происходит?

2. При задаче border-radius в процентах и пикселях скругление выглядит по разному. Причем если в %, то получается как бы не скругление, а срезание. Как это побороть?

P.S. Подозреваю, что в обоих случаях делаю какую-то стратегическую ошибку. Где искать корни этой ошибки?
Ответ: Удалось победить таким образом:

Код HTML5
1
2
3
4
5
6
7
8
9
<nav class="menu">
            <ul><span>
                <li><a href="index.html">Главная</a></li>
                <li><a href="articles.html">Статьи</a></li>
                <li><a href="info.html">Для клиентов</a></li>
                <li><a href="contacts.html">Контакты</a></li>
                </span>
            </ul>
        </nav>

Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a.header, .menu a
{
    text-decoration: none;
}
 
nav.menu
{
    width: 100%;
    text-align: center;
}
 
.menu li
{
    background-color: lightgrey;
    display: inline-block;
    width: 10em;
    border: 3px solid grey;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px;
    font-size: 1em;
}
 
 
li.menu:hover
{
    background-color: grey;
}
Вопрос: Выровнять кнопки меню по центру

Не могу выровнить по центру кнопки меню. Вот CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@import url([url]http://fonts.googleapis.com/css?family=Capriola);[/url]
/* Menu CSS */#cssmenu,
 
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  padding: 0;
  margin: 0;
  line-height: 50%;
  font-family: 'Capriola', sans-serif;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: '';
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  zoom: 1;
  height: 60px;
  background: url(images/bottom-bg.png) repeat-x center bottom;
  border-radius: 2px;
  width: auto;
}
#cssmenu ul {
  background: url(images/nav-bg.png) repeat-x 0px 4px;
  height: 60px;
}
#cssmenu ul li {
  float: left;
  list-style: none;
}
#cssmenu ul li a {
  display: block;
  height: 37px;
  padding: 22px 30px 0;
  margin: auto;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  font-size: 15px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  font-weight: 400;
  opacity: .9;
}
#cssmenu ul li:first-child a {
  margin: auto;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  background: url(images/color.png) center bottom;
  display: block;
 } 
Ответ: Пожалуйста ))