Как сделать меню jQuery UI nav горизонтальным?
Мне нравится материал jQuery UI!
Мне нравится меню навигации, но я не могу получить его горизонтально. Должно быть, я что-то упускаю.
кто-нибудь знает, как изменить CSS? Я пробовал это, но это для более старой версии и не работает, так как больше нет "ясно", чтобы держать их друг на друге.
соответствующий CSS:
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }
Спасибо за помощь!
11 ответов
вы можете сделать это:
/* Clearfix for the menu */
.ui-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
а также:
.ui-menu .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: auto;
}
Я восхищаюсь всеми этими усилиями по преобразованию меню в меню, потому что я ненавижу пытаться взломать CSS. Такое чувство, что я вмешиваюсь в силы, которых никогда не смогу понять! Я думаю, что гораздо проще добавить файлы меню, доступные в меню ветви jQuery ui.
Я загрузил полный файл jQuery ui css в комплекте из jQuery ui скачать сайт
в голове моего документа я помещаю файл css jQuery ui, который содержит все (я на версии 1.9.x на данный момент), а затем конкретный файл CSS для виджета меню, загруженного из меню ветви jQuery ui
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" />
Не забывайте, что папка изображений со всеми маленькими значками, используемыми jQuery UI, должна находиться в той же папке, что и jQuery-ui.файл CSS.
тогда в конце тела у меня:
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script>
это копия обновленной версии jQuery, за которой следует копия файла пользовательского интерфейса jQuery, затем модуль меню, загруженный из меню ветви jQuery ui
файл CSS меню освежающе короткий:
.ui-menubar { list-style: none; margin: 0; padding-left: 0; }
.ui-menubar-item { float: left; }
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }
но файл JavaScript меню 328 строк-слишком длинный, чтобы цитировать здесь. С его помощью вы можете просто вызвать menubar (), как в этом примере:
$("#menu").menubar({
autoExpand: true,
menuIcon: true,
buttons: true,
select: select
});
как я уже сказал, Я восхищаюсь всеми попытками взломать объект меню, чтобы превратить его в горизонтальную полосу, но я обнаружил, что всем им не хватает какой-то стандартной функции горизонтального меню. Я не уверен, почему этот виджет еще не поставляется с jQuery UI, но, по-видимому, все еще есть некоторые ошибки. Например, я попробовал его в режиме причуд IE 7, и позиционирование было странным, но он отлично выглядит в Firefox, Safari и IE 8+.
этот пост вдохновил меня попробовать меню jQuery ui.
<ul id="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3-1</a>
<ul>
<li><a href="#">Item 3-11</a></li>
<li><a href="#">Item 3-12</a></li>
<li><a href="#">Item 3-13</a></li>
</ul>
</li>
<li><a href="#">Item 3-2</a></li>
<li><a href="#">Item 3-3</a></li>
<li><a href="#">Item 3-4</a></li>
<li><a href="#">Item 3-5</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
.ui-menu {
overflow: hidden;
}
.ui-menu .ui-menu {
overflow: visible !important;
}
.ui-menu > li {
float: left;
display: block;
width: auto !important;
}
.ui-menu ul li {
display:block;
float:none;
}
.ui-menu ul li ul {
left:120px !important;
width:100%;
}
.ui-menu ul li ul li {
width:auto;
}
.ui-menu ul li ul li a {
float:left;
}
.ui-menu > li {
margin: 5px 5px !important;
padding: 0 0 !important;
}
.ui-menu > li > a {
float: left;
display: block;
clear: both;
overflow: hidden;
}
.ui-menu .ui-menu-icon {
margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li {
float: left;
display: block;
}
$( "#nav" ).menu({position: {at: "left bottom"}});
<ul id="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3-1</a>
<ul>
<li><a href="#">Item 3-11</a></li>
<li><a href="#">Item 3-12</a></li>
<li><a href="#">Item 3-13</a></li>
</ul>
</li>
<li><a href="#">Item 3-2</a></li>
<li><a href="#">Item 3-3</a></li>
<li><a href="#">Item 3-4</a></li>
<li><a href="#">Item 3-5</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: auto;
}
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }
.ui-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
$( "#nav" ).menu({position: {at: "left bottom"}});
добавление на Михайлиса Багос ответа. Я закончил тем, что сделал следующее:
<style>
.ui-menu{
z-index: 1000;
}
#menubar-layout-container > .ui-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menubar-layout-container > .ui-menu > .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: auto;
}
.ui-menu .ui-menu-icon{
display: none;
}
</style>
это делает Меню верхнего уровня горизонтальным, но оставляет любые подменю вертикальными.
мне пришлось удалить значки, так как это испортило макет
там также, кажется, проблема с позиционированием меню.
просто подумайте о меню jQuery-ui как раскрывающемся списке вертикаль, когда вы наводите курсор на тему в главном горизонтальном меню. Таким образом, у вас есть отдельное меню jQuery ui для каждой темы в главном меню. Главное меню horizonal - это просто коллекция float: left divs, завернутая в MainMenu div. Затем вы используете наведение и наведение, чтобы открыть каждое меню.
$('.mainmenuitem').hover(
function(){
$(this).addClass('ui-state-focus');
$(this).addClass('ui-corner-all');
$(this).addClass('ui-state-hover');
$(this).addClass('ui-state-active');
$(this).addClass('mainmenuhighlighted');
// trigger submenu
var position=$(this).offset();
posleft=position.left;
postop=position.top;
submenu=$(this).attr('submenu');
showSubmenu(posleft,postop,submenu);
},
function(){
$(this).removeClass('ui-state-focus');
$(this).removeClass('ui-corner-all');
$(this).removeClass('ui-state-hover');
$(this).removeClass('ui-state-active');
$(this).removeClass('mainmenuhighlighted');
// remove submenu
$('.submenu').hide();
}
);
функция showSubmenu проста - она просто позиционирует подменю и показывает он.
function showSubmenu(left,top,submenu){
var tPosX=left;
var tPosY=top+28;
$('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'});
$('#'+submenu).show();
}
затем вам нужно убедиться, что подменю видно, когда ваш курсор находится на нем и исчезает, когда вы уходите (это должно быть в вашем документе.готовая функция.
$('.submenu').hover(
function(){
$(this).show();
},
function(){
$(this).hide();
}
);
также не забудьте скрыть подменю, чтобы начать с - в документе.готовая функция
$(".submenu" ).hide();
Смотрите полный код здесь
Я просто в течение 3 дней искал решение jQuery UI и CSS, я объединяю некоторый код, который я видел, немного исправляю, и, наконец, (вместе с другими кодами) я мог бы заставить его работать!
http://jsfiddle.net/Moatilliatta/97m6ty1a/
<ul id="nav" class="testnav">
<li><a class="clk" href="#">Item 1</a></li>
<li><a class="clk" href="#">Item 2</a></li>
<li><a class="clk" href="#">Item 3</a>
<ul class="sub-menu">
<li><a href="#">Item 3-1</a>
<ul class="sub-menu">
<li><a href="#">Item 3-11</a></li>
<li><a href="#">Item 3-12</a>
<ul>
<li><a href="#">Item 3-111</a></li>
<li><a href="#">Item 3-112</a>
<ul>
<li><a href="#">Item 3-1111</a></li>
<li><a href="#">Item 3-1112</a></li>
<li><a href="#">Item 3-1113</a>
<ul>
<li><a href="#">Item 3-11131</a></li>
<li><a href="#">Item 3-11132</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 3-113</a></li>
</ul>
</li>
<li><a href="#">Item 3-13</a></li>
</ul>
</li>
<li><a href="#">Item 3-2</a>
<ul>
<li><a href="#."> Item 3-21 </a></li>
<li><a href="#."> Item 3-22 </a></li>
<li><a href="#."> Item 3-23 </a></li>
</ul>
</li>
<li><a href="#">Item 3-3</a></li>
<li><a href="#">Item 3-4</a></li>
<li><a href="#">Item 3-5</a></li>
</ul>
</li>
<li><a class="clk" href="#">Item 4</a>
<ul class="sub-menu">
<li><a href="#">Item 4-1</a>
<ul class="sub-menu">
<li><a href="#."> Item 4-11 </a></li>
<li><a href="#."> Item 4-12 </a></li>
<li><a href="#."> Item 4-13 </a>
<ul>
<li><a href="#."> Item 4-131 </a></li>
<li><a href="#."> Item 4-132 </a></li>
<li><a href="#."> Item 4-133 </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4-2</a></li>
<li><a href="#">Item 4-3</a></li>
</ul>
</li>
<li><a class="clk" href="#">Item 5</a></li>
</ul>
в JavaScript
$(document).ready(function(){
var menu = "#nav";
var position = {my: "left top", at: "left bottom"};
$(menu).menu({
position: position,
blur: function() {
$(this).menu("option", "position", position);
},
focus: function(e, ui) {
if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
$(this).menu("option", "position", {my: "left top", at: "right top"});
}
}
}); });
в CSS
.ui-menu {width: auto;}.ui-menu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}.ui-menu .ui-menu-item {display: inline-block;margin: 0;padding: 0;width: auto;}#nav{text-align: center;font-size: 12px;}#nav li {display: inline-block;}#nav li a span.ui-icon-carat-1-e {float:right;position:static;margin-top:2px;width:16px;height:16px;background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px;}#nav li ul li {width: 120px;border-bottom: 1px solid #ccc;}#nav li ul {width: 120px; }.ui-menu .ui-menu-item li a span.ui-icon-carat-1-e {background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;
Я новичок в stackoverflow, поэтому, пожалуйста, будьте любезны :) однако, обращаясь к проблеме горизонтального меню jQuery ui, единственный способ, которым мне удалось решить проблему (ссылка на этой) было установлено:
#nav li {width: auto; clear: none; float: left}
#nav ul li {width: auto; clear: none; float:none}
Я знаю, что это старый поток, но я копался в исходном коде jQuery UI и построил на ответе Роуэна, который ближе к тому, что я искал. Только мне нужна была морковь, так как я чувствовал, что важно иметь визуальный индикатор из возможных подменю. От просмотра исходного кода (оба .js and .css) я придумал это, что позволяет морковке быть visiable без возиться с конструкцией (высотой) и также alowing меню для того чтобы появиться вертикаль под родителем пункт.
в jQuery-ui.js сделайте поиск, чтобы найти $.widget( "ui.menu")
и измените положение на:
position: {
my: "center top",
at: "center bottom"
}
и в вашем css добавьте:
#nav > .ui-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav > .ui-menu > .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 3px;
width: auto;
}
.ui-menu .ui-menu-item a {
padding: 0;
}
.ui-menu .ui-menu-icon{
position: relative;
left: 1px;
top: 6px;
}
конечным результатом будет горизонтальное меню пользовательского интерфейса jQuery с подменю, отображаемое veriticaly под родительским пунктом меню.
изменения:
.ui-menu .ui-menu-item {
margin: 0;
padding: 0;
zoom: 1;
width: 100%;
}
в:
.ui-menu .ui-menu-item {
margin: 0;
padding: 0;
zoom: 1;
width: auto;
float:left;
}
должен начать вас.
лучший вариант, который я нашел, это плагин под названием jMenu.
Main:http://www.myjqueryplugins.com/jquery-plugin/jmenu
Демо: http://demos.myjqueryplugins.com/jmenu/
GitHub:https://github.com/alpixel/jMenu
скриншоты:
чтобы получить горизонтальную навигационную панель с вертикальными выпадающими списками, используйте комбинацию таблицы и неупорядоченных списков.
элементы уровня 1 представлены ячейками таблицы, последующие уровни представлены неупорядоченными списками.
размещение дочерних меню было проблемой. По умолчанию они должны отображаться непосредственно рядом, но на элементе верхнего уровня, который затемняет последующие элементы в горизонтальной навигационной панели. Наличие их ниже было нормально для одного выпадающее меню, но если есть второй уровень ниже, то этот 2-й уровень будет скрывать остальную часть первого. Решение состоит в том, чтобы открыть меню ниже и несколько вправо, см. опцию "позиция" в вызове меню.
<style type="text/css">
#trJMenu td { white-space: nowrap; width: auto; }
#trJMenu li { white-space: nowrap; width: auto; }
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#trJMenu").menu( { position: { my: "left top", at: "center bottom" } } );
});
</script>
<table>
<tr id='trJMenu'>
<td>
<a href='#'>Timesheets</a>
<ul>
<li><a href='#'>Labour</a></li>
<li><a href='#'>Chargeout Report</a></li>
</ul>
</td>
<td>
<a href='#'>Activity Management</a>
<ul>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Proposals</a></li>
</ul>
</td>
</tr>
</table>