Появляющееся слева направо меню на jQuery
В данной теме мы рассмотрим, как при помощи jQuery сделать простой скрипт, который будет отвечать за плавно появляющееся слева направо меню, которое изначально будет скрыто за пределами экрана. При повторном клике меню плавно исчезнет за пределы экрана.
Чтобы понять, о чем идет речь, обратите внимание на вертикальную надпись "МЕНЮ" на синем фоне с левой стороны экрана. Для того чтобы плавно появилось основное меню, кликните по данной надписи. Для плавного исчезновения меню повторно кликните по надписи "МЕНЮ".
|
- На главную - Скрипты - Хитрости - Статистика - Форум - Карта сайта |
М Е Н Ю |
Причем не обязательно делать таким образом именно меню. Данный скрипт прекрасно подойдет и для других элементов сайта которые не обязательно все время отображать на сайте. Например, таким образом можно скрыть форму обратной связи, поиск по сайту или что-нибудь еще.
Теперь давайте перейдем непосредственно к рассмотрению скрипта, который позволит реализовать подобное, плавно появляющееся слева направо, меню.
Для начала Вам потребуется подключить на своем сайте библиотеку jQuery. Сделать это можно следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее необходимо сделать само меню и кнопку, по клику на которую это меню должно появится. Мы не стали придумывать что-то навороченное, и ограничились обыкновенной таблицей, первой ячейкой которой является список ссылок, а второй - кнопка, которая отвечает за плавное появление и исчезновение меню за пределы экрана:
<table id="div_Menu">
<tr>
<td style="width: 100px;">
- <a href="http://usefulscript.ru/">На главную</a><br>
- <a href="http://usefulscript.ru/script.php">Скрипты</a><br>
- <a href="http://usefulscript.ru/trick.php">Хитрости</a><br>
- <a href="http://usefulscript.ru/statistics.php">Статистика</a><br>
- <a href="http://usefulscript.ru/forum/index.php">Форум</a><br>
- <a href="http://usefulscript.ru/map.php">Карта сайта</a>
</td>
<td id="link_Menu">М<br>Е<br>Н<br>Ю</td>
</tr>
</table>Для данной таблицы необходимо прописать следующие стили, которые скроют основное меню и зафиксируют его относительно экрана:
<style type="text/css">
#div_Menu {
position: fixed;
left: -116px;
top: 200px;
border-spacing: 0;
border: 1px solid blue;
background-color: #eeeeee;
line-height: 1.5;
}
#div_Menu td { padding: 7px; }
#link_Menu {
width: 25px;
text-align: center;
background-color: #0099ff;
cursor: pointer;
}
</style>Теперь остается лишь добавить небольшой JavaScript код, который при помощи библиотеки jQuery будет плавно перемещать меню слева направо и обратно:
<script type="text/javascript">
$(document).ready(function(){
var route = $("#div_Menu").offset().left;
$("#link_Menu").click(function(){
if ($("#div_Menu").offset().left<0) $("#div_Menu").animate({left:0}, 500);
else $("#div_Menu").animate({left:route}, 500);
});
});
</script>Как видите, задумка данного скрипта довольна хорошая, и реализация не занимает много места. Остается лишь немного поработать над оформлением и можно использовать.
https://pedant.ru/remont-apple/ipad/zamena-antenny
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
$(document).ready(function(){
var route = $("#div_Menu").offset().left;
$("#link_Menu").click(function(){ if ($("#div_Menu").offset().left<0) $("#div_Menu").animate({left:0}, 500); });
$(document).click(function(){ if ($("#div_Menu").offset().left>=0) $("#div_Menu").animate({left:route}, 500); });
});
на: $("#div_Menu").hover(function(){
А JavaScript код будет выглядеть следующим образом:
$(document).ready(function(){
var route = $("#div_Menu").offset().left;
$("#div_Menu").hover(function(){
if ($("#div_Menu").offset().left<0) $("#div_Menu").animate({left:0}, 500);
else $("#div_Menu").animate({left:route}, 500);
});
var url = document.location.href;
url = url.substring(url.lastIndexOf("/")+1);
$("a[href*='"+url+"']").addClass("current");
});
на: $("a[href*='"+url+"']").addClass("current").removeAttr("href");
Дальнейшее обсуждение перенесено на форум, но Вы можете оставлять свои комментарии здесь и они будут перенесены на форум.