Вертикальное меню

krig

Member
29.10.2010
8
1
#1
Всем привет!
Работаю над созданием адаптивной версии своего сайта. Так как сайт простой, решил не использовать фреймворки, а написать код самостоятельно. Столкнулся со следующей проблемой - нигде не могу найти пример вертикального адаптивного выпадающего меню. То есть, образцов горизонтального выпадающего адаптивного меню очень много, а вертикального нет. В чем проблема с его созданием? Подскажите, или дайте пример.
 
Симпатии: Понравилось YY2017

krig

Member
29.10.2010
8
1
#4
На больших экранах я хочу, чтобы меню располагалось слева. Подпункты меню должны выпадать вправо. На мобильных устройствах это меню должно превращаться в "аккордеон".
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#5
[accordion=bcenter]
{slide=Вот }1{/slide}

{slide=Такой}2{/slide}

{slide=Аккордеон}3{/slide}
[/accordion]

Можно сделать только на яваскрипте. И адаптивная верстка вам поможет мало, но если сделать чуть попроще, то можно.
В Целом в чем проблема-то? Принцип же один-в-один как с вертикальным.
Где попытки реализации хоть? Я то подскажу, но не писать же вместо вас.
 

krig

Member
29.10.2010
8
1
#6
Ну, в общем-то картина немного стала проясняться. Когда будет конкретная наработка, выложу.
 

krig

Member
29.10.2010
8
1
#9
Нашел то, что мне нужно, здесь -
Для просмотра контента необходимо: Войти или зарегистрироваться
.
Теперь возникла другая проблема. При подключении fancybox меню перестает работать.
Вот код подключения меню:
<script src="js/jquery.js"></script>
<script src="js/collapse.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-loader.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="js/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
mainMenuSubOffsetX: 1,
mainMenuSubOffsetY: -8,
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
А вот код подключения fancybox:
<script type="text/javascript" src="video/fancybox/jquery-1.5.min.js"></script>
<script type="text/javascript" src="video/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="video/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="video/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("a.foto").fancybox({
'transitionIn' :'elastic',
'transitionOut' :'elastic',
'speedIn' :1000,
'speedOut' :1000
});
});
</script>
Когда отключаю jquery-1.5.min.js в коде fancybox, меню работает, а fancybox - нет. Посоветуйте, как устранить эту неполадку?
 

-master-

Well-known member
14.01.2012
616
12
#10
какую неполадку? ничего не видно, что к чему, кто знает этот fancybox ? спросите на сайте разработчика, или выкладывайте тут код чтобы смотреть
 

krig

Member
29.10.2010
8
1
#11
Скачал и установил fancybox2 и проблема ушла. Старый fancybox не работал с новыми версиями jquery.