Меню горизонтального слайдера

Question

Я пытаюсь создать фиксированное меню, подобное изображению.
Я искал некоторый плагин jquery, но единственное, что я нашел, это меню аккордеона или вкладки, которое открывается в вертикальном направлении.
Я хотел бы реализовать это содержание меню с помощью JQuery + CSS, как системы с плавающей панели Visual Studio, с содержанием в горизонтальном направлении

Есть ли у вас какие-либо примеры для него?

content http://img233.imageshack.us/img233/859/menuij.png

Answer 1

я нашел именно то, что мне нужно, JQuery плагин Tab-Slide-Out

Answer 2

можно иметь вне страницы контента. Спецификация W3C говорит, что в позиционировании допустимы отрицательные числа (это работает в Firefox, не уверен в Invalid Explorer).

Поместите эти два вместе, и решение становится очень просто:

Я предполагаю, что вы уже создал DIV (с идентификатором = «меню») окружающей вкладкой (ID = «menutab») и содержанием (вкладка и содержимое сами являются отдельными div). Вы можете использовать относительное позиционирование или простые директивы float CSS, чтобы получить вкладку и содержимое, где вы хотите. Как только это будет выглядеть хорошо, добавьте следующий код:

$('#menutab').addClass('in'); 
var contentWidth = $('#content').width(); 

$('#menutab').click(function(){ 
    if($(this).is('.out')){ 
    $(this).removeClass('out').addClass('in'); 
    $('#menu').css({left: '-'+contentWidth}); 
    } 
    if($(this).is('.in')){ 
    $(this).removeClass('in').addClass('out'); 
    $('#menu').css({left: 0}); 
    } 
}); 

Я предположил, что меню по умолчанию. Состояние поддерживается классом, связанным с вкладкой меню (вход/выход). Просто добавьте функцию обратного вызова щелчка на вкладку меню, эта функция обратного вызова проверяет, включено или нет меню с назначенными ему классами. Если в левой позиции установлено значение минус ширина содержимого, если он находится в левой позиции, то устанавливается на край страницы.

Если вы хотите быть действительно увлекательным, вы можете использовать функцию .animate() jquery, чтобы она скользнула внутрь и наружу. Но я думаю, что эти вещи, как пустая трата ресурсов браузера, потому что я вырос делать научное кодирование, так что вам придется работать, что немного из себя;)