Раскрывающийся список в строку

maritca · July 4, 2012

Опять я со своим списком, но уже совсем по другому вопросу.

Итак, здесьесть меню, сделанное по этому образцу.

Всё работает, всё хорошо, но я теперь хочу растянуть выпадающий список тоже в одну строку. Для этого прописала в #nav ul li {float: left;}.

И, в итоге, получилось, что пункты не растянулись в одну строку, а их что-то ограничивает по ширине, и они всё равно переносятся. Я не могу понять, чем это регулируется? И ещё нужно будет, чтобы эти выпадающие пункты "выпадали" не сразу под родительским пунктом, а ниже (под синей подложкой верхнего меню, если смотреть на сайт). Для этого нужно где-то прописать position к дочернему списку или как-то ещё?

mrnobody · July 4, 2012

1) Задайте .text-menu position: relative;

2) Удалите из #nav li position: relative;

3) Задайте #nav ul position: absolute; и опустите его вниз — top: 54px; (в моем случае)

Но теперь нельзя выбрать подменю, т.к. после того как уйдет курсор с ссылки исчезнут и подменю (((

Edited July 4, 2012 by mrnobody

Vzor · July 4, 2012

mrnobody а если отступ от верха чуть меньше сделать, к примеру 1px то меню неуспевает попадать. Основываясь на вашем примере у меня получилось так:

#nav - добавляем display: relative;

#nav li - удаляем position: relative;

#nav ul - добавляем top: 26px;

#nav ul li - добавляем float: left;

Далее если нужно чтоб подменю появлялось под выделенным пунктом.

#nav li:hover ul - заменяем left:0; на display:block;

#nav ul - заменяем left:-9999px; на display:none;

Данный приме не претендует на универсальность но как вариант.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">

/* Сброс
—————————— */
body,ul,li,h1 {
	margin:0;
	padding:0;
}

/* Главное
—————————— */
html{
	height:101%;
}
body{
	font-family:Arial,Verdana,sans-serif;
	font-size:0.75em;
	color:#333;
	width:960px;
	margin:0 auto;
	padding:10px;
}
h1{
	font-family:Calibri, Arial, Verdana, sans-serif;
	font-size:2em;
	width:520px;
}

/* Меню
—————————— */
#nav{
	float:left;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	position: relative;
}
#nav li{
	float:left;
	margin-right:1px;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;

	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
	text-decoration:underline;
}

/* Выпадающие Пункты
—————————— */
#nav ul{
	list-style:none;
	position:absolute;
	top: 25px;
	display:none; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устнавливаем начальное состояние прозрачности */
	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
	padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
	float: left;
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	display:block; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
	text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	background:#333;
	background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}
</style>

</head>
<body>

<ul id="nav">
	<li>
		<a href="#" title="Вернуться на главную страницу">Главная</a>
	</li>
	<li>
		<a href="#" title="Информация о компании">О нас</a>
		<ul>
			<li><a href="#">Продукты</a></li>
			<li><a href="#">Команда</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Что мы можем для вас сделать">Услуги</a>
		<ul>
			<li><a href="#">Услуга один</a></li>
			<li><a href="#">Услуга два</a></li>
			<li><a href="#">Услуга три</a></li>
			<li><a href="#">Услуга четыре</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Наша продуктовая линейка">Продукты</a>
		<ul>
			<li><a href="#">Маленький продукт (первый)</a></li>
			<li><a href="#">Маленький продукт (второй)</a></li>
			<li><a href="#">Маленький продукт (третий)</a></li>
			<li><a href="#">Маленький продукт (четвертый)</a></li>
			<li><a href="#">Большой продукт (пятый)</a></li>
			<li><a href="#">Большой продукт (шестой)</a></li>
			<li><a href="#">Большой продукт (седьмой)</a></li>
			<li><a href="#">Большой продукт (восьмой)</a></li>
			<li><a href="#">Невообразимый продукт (девятый)</a></li>
			<li><a href="#">Невообразимый продукт (десятый)</a></li>
			<li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Как с нами связаться">Контакт</a>
		<ul>
			<li><a href="#">Часы работы</a></li>
			<li><a href="#">Местоположение</a></li>
		</ul>
	</li>
</ul>

<h1>Здесь расположен простой контент для демонстрации перекрытия меню.</h1>

</body>
</html>

Edited July 4, 2012 by Vzor

Vzor · July 4, 2012

Извеняюсь ниже случаино копию своего ответа создал. Затёр ...

Edited July 4, 2012 by Vzor

maritca · July 5, 2012

Спасибо, разбираюсь...

Edited July 5, 2012 by maritca

maritca · July 6, 2012

Пока в горизонтальной строке необходимость отпала, но возник ещё вопрос по поводу. Как сделать так, чтобы это меню работало в IE?

SelenIT · July 6, 2012

Убрать <p align="justify"> перед доктайпом. Перед доктайпом не должно быть ничего (кроме пробелов, хотя и то нежелательно). Иначе IE сходит с ума и воображает себя 5-й версией.

maritca · July 9, 2012

Убрать <p align="justify"> перед доктайпом. Перед доктайпом не должно быть ничего (кроме пробелов, хотя и то нежелательно). Иначе IE сходит с ума и воображает себя 5-й версией.

Гм, да, действительно... <p align="justify">

А откуда оно может браться? В коде шаблона ничего такого перед доктайпом нет.

На всякий случай - вот что вижу я при редактировании шаблона:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<?$APPLICATION->ShowHead();?>

<meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET;?>" />
<?$APPLICATION->ShowMeta("robots")?>
<?$APPLICATION->ShowMeta("keywords")?>
<?$APPLICATION->ShowMeta("description")?>
<title>Shark ID | <?$APPLICATION->ShowTitle();?></title>
<!--?$APPLICATION->ShowCSS();?-->
<!--?$APPLICATION->ShowHeadStrings()?-->

<script type='text/javascript' src='http://www.google.com/jsapi'></script> 

<script type="text/javascript" src="http://yabeda.marketing-solutions.ru/media/counter.js"></script>

<script type="text/javascript" src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script>

<!-- ******************************************** JAVA SCRIPT ******************************************** -->


<script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/bitrix/js/jquery/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="/bitrix/js/jquery/thickbox-new.js"></script>
<link rel="stylesheet" type="text/css" href="/bitrix/js/jquery/thickbox.css">
<link rel="stylesheet" type="text/css" href="/bitrix/js/jquery/jcarousel-kassandra.css">

<script type="text/javascript">

tb_pathToImage = "/images/jcarousel/loading-thickbox.gif"; // Set thickbox loading image

$(document).ready(function()
{
    $('.title').append('<span class="post-span"></span>');
    $('.post-span').each(function() 
	{
        var trigger = $(this), state = false, el = trigger.parent().next('.entry');
        trigger.click(function()
		{
            state = !state;
            el.slideToggle();
            trigger.parent().parent().toggleClass('inactive');
        });
        trigger.click();
    });
});

function mycarousel_itemLoadCallback(carousel, state)
{
	for (var i = carousel.first; i <= carousel.last; i++)  { tb_init(carousel.get(i).get(0)); }
	carousel.add(5, "I'm item #" + 5);
};

$(document).ready(function()
{
	$('.carousel-k').each(function()
	{	
		var par = $(this).parent().parent().parent().parent();
		$(this).jcarousel({ scroll:1 });
		$(this).parent().parent().parent().width(par.width());
		$(this).parent().parent().width(par.width()-82);
	});

	$('.carousel-k-v').each(function()
	{	
		$(this).jcarousel({ scroll:1, vertical:true });
		var h = $("#good-img").height();
		if (h==0) h=244;
		$(this).parent().parent().parent().height($("#good-text").height()-h-80);
		$(this).parent().parent().height($("#good-text").height()-h-80-82);

	});
});

$(document).ready(function() 
{
	var $pages = $('.products-bookmark-page');
        $pages.hide();
	$pages.filter('#'+$('.products-bookmarks__active').attr('page')).show();

	$('.products-bookmarks__item:not(.products-bookmarks__active)').live('click',
		function()
		{
			$('.products-bookmarks__active').removeClass('products-bookmarks__active');
			var page = $(this).addClass('products-bookmarks__active').attr('page');
			$pages.hide().filter('#'+page).show();
		}
	);
});

$(document).ready(function()
{
	var url = window.location.href;
	var spl = new Array();
	spl = url.split('/');
	var ptr = new Array();
	prt = spl[4].split('?');
	var page=prt[0];

	if (page=='PO.php')// торговля
	{
		$("#Программы_menu").removeClass('close');
	}
	if (page=='retail.php')// торговля
	{
		$("#Программы_menu").removeClass('close');
		$("#Торговля_menu").removeClass('close');
	}
	else if (page=='warehouse.php') // склад
	{
		$("#Программы_menu").removeClass('close');
		$("#Склад_menu").removeClass('close');
	}
	else if (page=='inventory.php') // инверт
	{
		$("#Программы_menu").removeClass('close');
		$("#Инвентаризация_menu").removeClass('close');
	}
	else if (page=='production.php') // склад
	{
		$("#Программы_menu").removeClass('close');
		$("#Склад_menu").removeClass('close');
	}
});

</script>

<style>
body,ul,li,h1 {
        margin:0;
        padding:0;
}
</style>
</head>

<body class="body">

<!-- *********************************************** HEAD *********************************************** -->
<table class="t-table" cellpadding="0" cellspacing="0" border="0" cols="3">
<thead>
  <tr>
    <td class="t-header" colspan="2">  
      <div class="t-header-shark">
<!--[if IE]>
<div class="text-menu" style="margin-top: 10px; padding-left: 40px;">
<![endif]-->
      <a href="http://www.shark.ru/"><img src="/images/header/up_logo.png"></a>
      </div> 
      <div class="t-header-con" style="z-index: 7;">
<!--[if IE]>
<div style="position: relative; 
            margin-top: -90px; 
            margin-left: 0px;
            float:left;
            background-size: contain;
            width:200px; 
            height:20px;">
<![endif]-->
                <a href="/feedback/"><img src="/images/letter1.gif" alt="Обратная связь" title="Обратная связь" width="9" height="6" border="0"></a>
		   
		<a href="/feedback/" style="text-decoration: none;">Обратная связь</a>
		<br><br><br>
		<a href="/sitemap/"><img src="/images/map1.gif" alt="Карта сайта" title="Карта сайта" width="11" height="9" border="0"></a>
		   
		<a href="/sitemap/" style="text-decoration: none;">Карта сайта</a>
      </div>
    </td>
  </tr>
<thead>
</table>
<!-- *********************************************** MENU ***********************************************-->
<table class="t-table-menu" cellpadding="0" cellspacing="0" border="0" cols="3">
<!--[if IE]>
<table class="t-table-menu" cellpadding="0" cellspacing="0" border="0" cols="3" style="margin-top: -15px;">
<![endif]-->
<thead>
<tr>
    <td class="t-menu" colspan="2">

      <div class="t-header-menu">


<div class="text-menu" style="padding-top: 2px; padding-left: 40px;">
<ul id="nav">

	<li>
		<a href="http://www.shark.ru/catalog/index.php?ID=1" title="Оборудование AUTO ID">Автоматическая идентификация и кассовое оборудование ></a>
                <ul>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=10">Сканеры штрих-кода</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=11">Терминалы сбора данных</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=162">Печать этикеток и маркировка</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=30">Кассовое и торговое оборудование</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=47">POS терминалы</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=63">Радиочастотная идентификация (RFID)</a></li>
		</ul>
	</li>
	<li>
		<a href="http://www.shark.ru/catalog/index.php?ID=121" title="Весы">Весовое оборудование ></a>
	</li>
	<li>
		<a href="http://www.shark.ru/catalog/index.php?ID=159" title="Wi Fi">Беспроводные сети</a>
		<ul>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=100">Management Software Motorola</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=60">WiFi карты (Client Radio Devices)</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=61">Беспроводные коммутаторы (Wireless Switches)</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=62">Точки доступа и порты доступа (Access Points and Ports)</a></li>
		</ul>
	</li>
	</ul>
</div>
<div class="text-menu" style="padding-top: 30px; padding-left: 40px;">
<!--[if IE]>
<div class="text-menu" style="margin-top: -15px; padding-left: 0px;">
<![endif]-->
<ul id="nav">
	<li>
		<a href="http://www.shark.ru/catalog/index.php?ID=2" title="Вычислительная техника и ПО">Вычислительная техника и ПО ></a>
                <ul>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=56">Серверы</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=33">Компьютеры для дома и офиса</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=74">ЖК мониторы</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=48">Оргтехника</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=35">Телекоммуникации</a></li>
		</ul>
	</li>
	<li>
		<a href="http://www.shark.ru/catalog/index.php?ID=3" title="Комплексные решения">Комплексные решения ></a>
		<ul>
			<li><a href="http://www.shark.ru/catalog/detail.php?ID=114">Автоматизация торговли</a></li>
			<li><a href="http://www.shark.ru/catalog/detail.php?ID=386">Автоматизация производства</a></li>
                        <li><a href="http://www.shark.ru/catalog/detail.php?ID=408">Автоматизация склада</a></li>
		</ul>
	</li>
	<li>
		<a href="http://www.shark.ru/catalog/index.php?ID=7" title="Системы автоматизации">Системы автоматизации ></a>
		<ul>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=150">Автоматизация основных складских операций</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=149">Адресное хранение на складе</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=148">Инвентаризация оборудования</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=147">Инвентаризация основных средств</a></li>
                        <li><a href="http://www.shark.ru/catalog/index.php?ID=151">Проверка цен в торговом зале</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=152">Решение для промышленности</a></li>
		</ul>
	</li>
        <li>
		<a href="http://www.shark.ru/catalog/index.php?ID=8" title="Сервис">Сервис ></a>
		<ul>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=54">Настройка, внедрение, проектирование и монтаж</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=53">Техническое обслуживание и ремонт оборудования</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=129">Проведение инвентаризации</a></li>
			<li><a href="http://www.shark.ru/catalog/index.php?ID=91">Услуги ЦТО</a></li>
		</ul>
	</li>
	</ul>
</div>

<table class="shadow" border="0" cellspacing="0" cellpadding="0" align="center" style="position: fixed; top: 120px; left: 1080px;">
<!--[if IE]>
<table class="shadow" style="margin-top: -15px; margin-left: 1040px;">
<![endif]-->
			<form action="/search/index.php" method="post">
			<tr>
				<!--<td width="1" style="padding-left: 20px;"><img src="/images/0search.gif" alt="" width="1" height="18" border="0"></td>-->
				<td><input type="text" name="q" value="поиск" class="search" onFocus="this.value='';"></td>
				<td><input type="image" src="/images/search.gif" alt="Искать" width="15" height="18" border="0" title="Искать"></td>
			</tr>
			</form>
			</table> 



    </td>
  </tr>
 <thead>
</table>


<!-- *********************************************** PAGE *********************************************** -->
<table class="t-table" cellpadding="0" cellspacing="0" border="0" cols="3">
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21501436-29']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<?$APPLICATION->ShowPanel();?><a name="tothetop" id="tothetop"></a>

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td width="100%" valign="top" id="center">

	<div id="center20">
		<!--<h1><?$APPLICATION->ShowTitle();?></h1>-->
#WORK_AREA#		
	</div>
	</td>
    </tr>


<!-- *********************************************** СЧЁТЧИК *********************************************** -->
<tr>
<td>
<!-- InetLog -->
<script language="javascript">
i=Math.random();w=screen.width;h=screen.height;
clr=screen.colorDepth;
if(navigator.cookieEnabled) ck = "Y"; else ck = "N";
document.write('<a href="http://inetlog.ru/" target="_top"><img width=88 height=31 src="http://inetlog.ru/counter/?i='+i+'&cid=6&r='+escape(document.referrer)+'&sid=49233&ck='+ck+'&res='+w+'x'+h+'&clr='+clr+'&pg='+escape(window.location.href)+'" alt="InetLog.ru - статистика сайта" border=0></a>')
</script><a href="http://inetlog.ru" title="статистика"><img border=0 width=1 height=1 src="http://inetlog.ru/img/del.gif" alt="статистика"></a>
<!-- /InetLog -->
</td>
</tr>

</table>

<!-- *********************************************** DOWN *********************************************** -->
<table class="t-down-menu" cellpadding="0" cellspacing="0" border="0" cols="3">
<thead>
<tr>
    <td class="t-bottom-menu" colspan="2">  
      <div class="t-bot-menu"> 
<div class="text-menu" style="padding-top: 3px;padding-left: 40px;">
<a class="text-menu" href="http://www.shark.ru/company/" target="_blank">О компании</a>  >
<a class="text-menu" href="http://www.shark.ru/news/" target="_blank">Новости</a>  >
<a class="text-menu" href="http://www.shark.ru/tech/" target="_blank">Технологии</a>  > 
<a class="text-menu" href="http://www.shark.ru/present/" target="_blank">Презентации</a>  > 
<a class="text-menu" href="http://www.shark.ru/support/" target="_blank">Техподдержка</a>  > 
<a class="text-menu" href="http://www.shark.ru/diler/" target="_blank">Партнёрам</a>  > 
<a class="text-menu" href="http://www.shark.ru/services.php" target="_blank">Услуги</a>  > 
<a class="text-menu" href="http://www.shark.ru/company/contacts/" target="_blank">Контакты</a></div>
      </div> 

    </td>
  </tr>
<tr>
    <td class="t-down" colspan="2">  
        <div style="width: 390px; padding: 15px 10px 10px 44px;">
		<br><font style="font-family: 'Times New Roman', serif; font-size: 11pt;">Все права защищены. 2012 г.<br>Shark ID<br/></font>
	</div>
        <td class="t-down-reg" colspan="2"> <div id="left4">
<!--[if IE]>
<div style="margin: 10 10 10 -100; z-index: 10;">
<![endif]-->
<!--	  #COMPONENT0001#
-->
форма регистрации
		</div></td>
</tr>
 <thead>
</table>
</body>
</html>

При просмотре кода страницы в браузере откуда-то действительно появяется p, причём вбирает в себя пространство от хедера до боди... Не понимаю, откуда.

Edited July 9, 2012 by maritca

Sign In

Раскрывающийся список в строку

Question

maritca

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Vzor

Link to comment

Share on other sites

Vzor

Link to comment

Share on other sites

maritca

Link to comment

Share on other sites

maritca

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

maritca

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information