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

а в чем проблема с выводом вертикального меню?) обычно вертикальное меню в мобильной версии ничем не отличается от горизонтального, и выводится в виде аккордеона, или выезжающим сбоку с разными вариациями.

в яндексе пробовали искать?) вот вам с первой страницы пример

Я хочу, чтобы на больших экранах меню располагалось слева, а подпункты выезжали вправо. А на мобильных устройствах меню должно превращаться в "аккордеон".

Не в качестве готового меню, но как идея использовать inline-block и align="ridht" например.

Понятно, что всплывающие пункты можно показывать только при наведении, как-то позиционировать на обычном компьютере и показывать сразу на мобильном при помощи того же @media screen and (max-width: 350px) { }

Спасибо за идею, но я искал конкретный пример, т.к. моих умений недостаточно, чтобы воплотить эту идею в жизнь.:(

Нашел то, что мне нужно, здесь - http://www.smartmenus.org/.

Теперь возникла другая проблема. При подключении 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 - нет. Посоветуйте, как устранить эту неполадку?

А если отключить jquery-1.5.min.js и так сделать:

<script src="js/jquery.js"></script>

<script type="text/javascript" src="video/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script src="js/collapse.js"></script>

Задайте класс для версии под мобильные, и десктоп, и подгоняйте их уже через media queries.

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

ТС почитайте о media queries

Вы несколько припозднились с ответом. Я уже решил проблему.