Прозрачный фон в выпадающем списке

StormMan · September 1, 2010

Приветствую, друзья!

Есть в просторах инета такое выпадающее меню на CSS:

html-код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- текст заголовка и меню нашего HTML документа -->
<html>
<head>
 <title></title>
 <meta http-equiv="content-type" 
  content="text/html; charset=windows-1251">
 <meta name="author" content="DarkRaha (Verma Rahul)"> 

<!-- стили для нашего меню -->
<link rel="stylesheet" type="text/css" href="menudemo.css">

<!-- только для поддержки IE6 -->
 <script type="text/javascript" src="menuevent.js"></script>

</head>
<body onload="correctMenuIE6();"> <!-- onload только для поддержки IE6 -->

<!-- определение меню, для этого были использованы списки -->
<ul id="mainMenu">
<li>Api 
  <ul class="submenu">
  <li><a href="#OpenGl">OpenGl</a>
  <li><a href="#wxWdigets">wxWidejts</a>
  <li><a href="#SamrtWin">SamrtWin</a>
  </ul>
<li>Web
   <ul class="submenu">
   <li><a href="#HTML">HTML</a>
   <li><a href="#JavaScript">JavaScript</a>
   </ul>
</ul>
<br>
...

css-код:

/* описание главного меню */
#mainMenu {
list-style:none; /* отключаем маркеры */
background: #DEB887; /* фон меню */
}

/*общее описание всех элементов меню */
#mainMenu li{
background: #DEB887;

/*чтобы элементы главного меню отображались в ряд */
display: inline; 
float: left;
width: 100px;
margin: 0;

text-align: center;
}


/*описание выпадающих меню  */
.submenu {
/*по умолчанию все выпадающие меню скрыты
и позиционируются абсолютно */
display: none;
position:absolute;
background: #DEB887;

/* следующие определения необходимы 
только для IE (6 и 7) */
margin: 0;	   /* убираем отступы*/
left:0;		  /* иначе выпадающий список будет сдвинут 
					в сторону, относительно родительского элемента*/
top: 100%;	   /* чтобы выпадающий список отображался под
					родительским, иначе родительский будет закрыт
					первым элементом*/
}


/* при наведении на элемент меню
мы будем отображать соответствующее ему
выпадающее меню*/
#mainMenu li.hover  .submenu, /*для IE6*/
#mainMenu li:hover  .submenu {
display: block;
list-style:none;
padding: 0;
}

/* при наведении на любой элемент меню,
и в главном меню и выпадающих меню,
делаем подсветку и определяем позиционирование
в относительные координаты */
#mainMenu  li.hover, /*для IE6*/
#mainMenu  li:hover {
position: relative;
background: #FFE4B5
}

/* настройка ссылок входящих в меню*/
#mainMenu a, 
#mainMenu a:link, 
#mainMenu a:visited {
text-decoration:none;
color: #000080;
}

источник: http://www.darkraha.com/rus/css/css11.php

Я хочу сделать прозрачный фон у элементов выпадающего меню. Без использования картинок, даже 1х1, исключительно с помощью прозрачности css. Логику понимаю так: раз мне нужно сделать прозрачным только фон, а текст оставить непрозрачным, то элемент с текстом и элемент с фоном не должны совпадать. Схематично:

<li class="элемент_меню"><div class="фон"></div><a class="текст"></a></li>

но не

<li class="элемент_меню"><div class="фон"><a class="текст"></a></div></li>

Правильно?

Тогда в html'е элемент списка выпадающего меню дополняю таким образом:

<li><div class="background"></div><a href="#OpenGl">OpenGl</a>

То же самое и с остальными: после тега <li> добавляю блок с фоном <div class="background"></div>.

В css прописываю свойства:

.submenu .background {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
}

Получается, что элемент с фоном идёт НАД ссылкой. Мне нужно его сделать ЗА ссылкой, то есть фоном этой ссылки. Пробовал абсолютно позиционировать, т.е. вместо relative указывал absolute, но в этом случае нарушалось всё позиционирование выпадающего списка.

Где у меня ошибка, как добиться правильного отображения выпадающего списка с прозрачным фоном? Подскажите, пожалуйста. Уже кучу вариантов перебрал, гугл с яндексом замучил - не помогло ничего. Осталась у меня надежда только на ваш опыт...

Edited September 1, 2010 by StormMan

psywalker · September 1, 2010

Вот тебе пример, там была похожая задача, сделать фон с opacity под ссылкой. Разбери и примени у себя.

http://psywalker.ru/Forum/JS/Primitive/Dom...-Plavnoe/4.html

StormMan · September 1, 2010

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- текст заголовка и меню нашего HTML документа -->
<html>
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
* { margin: 0; padding: 0 }

/* Контейнер для ссылки с прозрачным фоном, в нём нет необходимости, но для большей похожести на мой случай */
container { 
	width: 300px;
	height: 25px;
	text-align: left;
	position: relative;
	background: #99ffff;
}

/* Блок с фоном */
.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 25px;
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
	background: black;
}

/* Ссылка */
.link {
	position: relative;
	font: 13px arial,sans-serif;
	color: red;
}
</style>
</head>

<body>
<div class="container">
	<!-- Блок с фоном -->
	<div class="background"></div>

	<!-- Ссылка -->
	<a class="link">Ссылка</a>
</div>
</body>

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

StormMan · September 2, 2010

Решил пока проблему установкой фона не для элемента списка, а для всего списка (с добавлением z-index):

<ul id="mainMenu">
<li>Api
  <ul class="submenu">
	  <div class="background"></div> <!-- Абсолютно позиционированный блок с фоном, растягивается на размер всего списка -->
	  <li><a href="#OpenGl">OpenGl</a>
	  <li><a href="#wxWdigets">wxWidejts</a>
	  <li><a href="#SamrtWin">SamrtWin</a>
  </ul>
<li>Web
   <ul class="submenu">
	   <div class="background"></div>
	   <li><a href="#HTML">HTML</a>
	   <li><a href="#JavaScript">JavaScript</a>
   </ul>
</ul>

И всё же интересно, возможно ли реализовать то же самое, устанавливая фон для каждого элемента в отдельности?

Это может пригодиться например для изменения цвета и прозрачности фона при наведении курсора на элемент меню. Вопрос для асов, мне вот не под силу оказался.

psywalker · September 2, 2010

Т.е. ты хочешь чтобы прозрачный фон был у каждого пункта, например тут:

  <ul class="submenu">
	  <div class="background"></div> <!-- Абсолютно позиционированный блок с фоном, растягивается на размер всего списка -->
	  <li><a href="#OpenGl">OpenGl</a>
	  <li><a href="#wxWdigets">wxWidejts</a>
	  <li><a href="#SamrtWin">SamrtWin</a>
  </ul>

p.s. кстати <li> надо закрывать

klierik · September 2, 2010

много текста..

выложите скрин того что вам нужно.

psywalker · September 2, 2010

много текста..
выложите скрин того что вам нужно.

+1

Sign In

Прозрачный фон в выпадающем списке

Question

StormMan

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

StormMan

Link to comment

Share on other sites

StormMan

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information