X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Здравствуйте уважаемые гуру... Вопрос от новичка...
Marinec
Marinec
Topic Starter сообщение 22.7.2013, 15:50; Ответить: Marinec
Сообщение #1


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

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выпадающее меню</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function over_link(lank) {$(lank).animate({padding: '15px'}, 300)}
function out_link(lank) {$(lank).animate({padding: '0px'}, 300)}
</script>

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

<style>

#leftt p a {margin:5px; display:block;
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-opera-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;}

#leftt p a:hover {cursor: pointer;
transform:translate(15px,0);
-moz-transform:translate(15px,0);
-webkit-transform:translate(15px,0);
-khtml-transform:translate(15px,0);
-opera-transform:translate(15px,0);
-ms-transform:translate(15px,0);}



</style>


</head>
<body bgcolor="#FFFF99"><div>
<ul class="menu" id="leftt">
<li><div id="leftt"><p><a href="">1С бухгалтерия</a></p></div>
<ul>
<li><a href="">1С бухгалтерия</a></li>
</ul>
<li><div id="leftt"><p><a href="">Гаджеты, прошивки, soft</a></p></div>
<ul>
<li><a href="">Android</a></li>
<li><a href="">Новости</a></li>
<li><a href="">Обои для смартфонов</a></li>
<li><a href="">Программы для android</a></li>
<li><a href="">Гаджеты</a></li>
<li><a href="">Tips&Tricks</a></li>
</ul>
</li>
<li><div id="leftt"><p><a href="">Создание и раскрутка сайтов</a></p></div>
<ul>
<li><a href="">Ruby on Rails</a></li>
<li><a href="">Как заработать на сайте (Марафон $$$)</a></li>
<li><a href="">web-дизайн</a></li>
<li><a href="">web-заметки</a></li>
<li><a href="">Программирование</a></li>
<li><a href="">Раскрутка сайтов</a></li>
<li><a href="">Создание сателлитов (сатострой)</a></li>
<li><a href="">Wordpress</a></li>
</ul>
<li><div id="leftt"><p><a href="">Обзоры игр</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Операционные системы</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Социальные сети</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Новости поисковых систем</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Другие темы</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Программы для ПК</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Обслуживание и защита ПК</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Техно-статьи</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
</ul> </div>
</body>
</html>


[CSS]*{
margin: 0;
padding: 0;
}

body {
margin: 10px;
}

ul.menu {
margin: 0;
padding: 0;
display: inline-block;
background-color: #b8d9ff;
display: block;
width: 310px;
}

ul.menu li {
list-style: none;
position: relative;
}

ul.menu li a {
padding: 2px 2px 2px;
color: #4a1e0f;
font-size: 13px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
display: block;
border-top: 1px solid #;
}

ul.menu li a:hover {
background-color: #df3a00;
}
ul.menu li:hover ul {
background-color: #df3a00;
}



/*Выпадающее меню*/
ul.menu li ul {
display: none;
}


ul.menu li:hover ul {
display: inline-block;
position: absolute;
left: 320px;
top: 0px;
background-color: #FFFFFF;
background:rgba;
opacity:95;
width: 226px;
z-index: 1000;

}[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 24.7.2013, 14:25; Ответить: Degradator
Сообщение #2


Надеюсь что понял про что вы. Когда вы наводите мыш на внутренний тег, то считается, что мышь уже ушла с того тега, на котором есть подсветка. Есть разные решения - например вот http://learn.javascript.ru/mousemove-events.

Я по другому подхожу к этому - я сравниваю координаты мыши относительно положения блока. Если мыш внутри координат, то вкл. Если снаружи то вкл. Вот скрипт http://traviator.net/js/topMenu.js.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Предложение по форуму от новичка
22 Yogsvet 5554 7.3.2024, 20:09
автор: Lumex
Открытая тема (нет новых ответов) Посоветуйте оффер казино для новичка
5 Megaspryt 1712 23.1.2024, 15:31
автор: markp_1xBet
Открытая тема (нет новых ответов) Вопрос - платное размещение баннеров на сайте
10 WGN 3254 14.12.2020, 14:20
автор: Peterson
Открытая тема (нет новых ответов) Ищу себя. Вёрстка, Программирование, Продающие тексты и другое от Новичка бесплатно
0 iCrew 1568 11.5.2020, 12:37
автор: iCrew
Открытая тема (нет новых ответов) Вопрос по рекламе в "инстаграме"
Только активные аккаунты могут создавать или редактировать рекламу
8 Zubkov 16092 17.1.2020, 17:49
автор: Forumacc


 



RSS Текстовая версия Сейчас: 21.5.2024, 0:58
Дизайн