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



 

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

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

Открыть тему
Тема закрыта
> Неработает меню в Эксплорере (hover)
gerasim13
gerasim13
Topic Starter сообщение 17.10.2008, 0:06; Ответить: gerasim13
Сообщение #1


Видимо я так и не понял как делать кросс-браузерное меню. В Firefox все замечательно, в ie 7 не корректно работает класс .active, а в ie 6 вообще дочернее меню не хочет вставать поверх родительного при наведении. Раньше как то добивался желаемого эффекта с помощью csshover.htc, но сейчас этот скрипт отказывается у меня работать. Вообщем не пойму что делать. Очень нужна помощь. Подскажите что не так.

Вот код меню:
div id="menu"><ul id="nav">
<li>
<a class="active" href="http://test1.ru/" title="Пункт 1
" >Пункт 1</a>
<ul>
<li>
<a href="/index.php?id=2" title="Пункт 2" >Пункт 2</a>

</li>
<li>
<a href="/index.php?id=3" title="Пункт 3" >Пункт 3</a>

</li>
<li>
<a href="/index.php?id=4" title="Пункт 4" >Пункт 4</a>

</li>
<li>
<a class="last" href="/index.php?id=5" title="Пункт 5" >Пункт 5</a>

</li>

</ul>
</li>
<li>
<a href="/index.php?id=6" title="Пункт 6" >Пункт 6</a>
<ul>
<li>
<a href="/index.php?id=8" title="Пункт 8" >Пункт 8</a>

</li>
<li>
<a class="last" href="/index.php?id=9" title="Пункт 9" >Пункт 9</a>

</li>

</ul>
</li>
<li>
<a href="/index.php?id=7" title="Пункт 7" >Пункт 7</a>
<ul>
<li>
<a href="/index.php?id=10" title="Пункт 10" >Пункт 10</a>

</li>
<li>
<a class="last" href="/index.php?id=11" title="Пункт 11" >Пункт 11</a>

</li>

</ul>
</li>
<li>
<a href="/index.php?id=12" title="Пункт 12" >Пункт 12</a>

</li>
<li>
<a href="/index.php?id=13" title="Пункт 13" >Пункт 13</a>

</li>
<li>
<a class="last" href="/index.php?id=14" title="[IMG]file:///C:/DOCUME%7E1/Admin/LOCALS%7E1/Temp/moz-screenshot.jpg[/IMG][IMG]file:///C:/DOCUME%7E1/Admin/LOCALS%7E1/Temp/moz-screenshot-1.jpg[/IMG]Пункт 14" >Пункт 14</a>

</li>

</ul></div>
А вот css:
/* ///////// Menu ///////// */
#menu {
text-transform:uppercase;
}
#menu ul {
list-style: none;
}
#menu li {
position:relative;
display: inline;
background: #afb0bc;
width:188px;
height:30px;
border:1px #fff solid;
float:left;
}
#nav a{
padding : 5px 0px 5px 5px;
width:183px;
line-height:20px;
text-decoration:none;
display : block;
color : #fff;
}
#menu li ul li a {
color:#7b7b85;
background:#e7e7e7;
}
#nav .active{
background: #ca2744;
}
#nav a:hover {
background :#f4f4f4;
color:#ca2744;
}
#menu li ul li a:hover {
background:#f2f2f2;
}
#menu li ul {
position:absolute;
top:29px;
left:-1px;
display : none;
padding-top:2px;
}
#nav li.hover ul, #nav li:hover ul {
display: block;
}
* html #menu ul li {
height: 1%;
}
* html #menu ul li a {
height: 1%;
}
#menu li:hover {
z-index:1000;
}
/* ///////////////////////// */


P.S Спасибо Exterior-у. Очень помог в прошлый раз.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 17.10.2008, 12:56; Ответить: Exterior
Сообщение #2


(' post='12946 @ 17.10.2008, 03:06)
в ie 7 не корректно работает класс .active, а в ie 6 вообще дочернее меню не хочет вставать поверх родительного при наведении

ну это же IE :unsure: ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Menu</title>

<!-- Style CSS -->
<style type="text/css">
<!--
/* ///////// Menu ///////// */
#menu {
text-transform: uppercase;
}

#menu ul {
list-style: none;
}

#menu li {
position: relative;
display: inline;
background: #afb0bc;
width: 188px;
height: 30px;
border: 1px #fff solid;
float: left;
}

#nav a {
padding: 5px 0px 5px 5px;
width: 183px;
line-height: 20px;
text-decoration: none;
display: block;
color: #fff;
}

#menu li ul li a {
color: #7b7b85;
background: #e7e7e7;
}

#nav .active {
background: #ca2744;
}

#nav a:hover {
background: #f4f4f4;
color: #ca2744;
}

#menu li ul li a:hover {
background: #f2f2f2;
}

#menu li ul {
position: absolute;
top: 29px;
left: -1px;
display: none;
padding-top: 2px;
}

#nav li.hover ul, #nav li:hover ul {
display: block;
}

* html #menu ul li {
height: 1%;
}

* html #menu ul li a {
height: 1%;
}

#menu li:hover {
z-index: 1000;
}
/* ///////////////////////// */
-->
</style>

<!-- JavaScript -->
<script type="text/javascript">
<!--
function initMenu() {
var points = document.getElementById('nav').getElementsByTagName('li');
for (var i=0; i<points.length; i++) {
points[i].onmouseover = function() {this.className += 'hover';}
points[i].onmouseout = function() {this.className = this.className.replace('hover', '');}
}
}
if (document.all && !window.opera) attachEvent("onload", initMenu);
//-->
</script>

</head>

<body>

<div id="menu">

<ul id="nav">
<li><a class="active" href="http://test1.ru/" title="Пункт 1">Пункт 1</a>
<ul>
<li><a href="/index.php?id=2" title="Пункт 2" >Пункт 2</a></li>
<li><a href="/index.php?id=3" title="Пункт 3" >Пункт 3</a></li>
<li><a href="/index.php?id=4" title="Пункт 4" >Пункт 4</a></li>
<li><a class="last" href="/index.php?id=5" title="Пункт 5" >Пункт 5</a></li>
</ul>
</li>

<li><a href="/index.php?id=6" title="Пункт 6" >Пункт 6</a>
<ul>
<li><a href="/index.php?id=8" title="Пункт 8" >Пункт 8</a></li>
<li><a class="last" href="/index.php?id=9" title="Пункт 9" >Пункт 9</a></li>
</ul>
</li>

<li><a href="/index.php?id=7" title="Пункт 7">Пункт 7</a>
<ul>
<li><a href="/index.php?id=10" title="Пункт 10">Пункт 10</a></li>
<li><a class="last" href="/index.php?id=11" title="Пункт 11">Пункт 11</a></li>
</ul>
</li>

<li><a href="/index.php?id=12" title="Пункт 12">Пункт 12</a></li>
<li><a href="/index.php?id=13" title="Пункт 13">Пункт 13</a></li>
<li><a class="last" href="/index.php?id=14" title="Пункт 14">Пункт 14</a></li>
</ul>

</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 17.10.2008, 14:56; Ответить: gerasim13
Сообщение #3


Hover в Ie6 что то не хочет работать. Может крипты какиенибудь надо прикрутить?
Вот код странци:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>My MODx Site | Русский</title>
<base href="http://test1.ru/"></base>
<style type="text/css" media="screen, tv, projection">
<!--
@import "assets/templates/altxsoft/css/style.css";
-->
</style>
<!--[if lt IE 7]>
<![if gte IE 5.5]>
<style type="text/css">
.wrapper {
width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 860)? "860px" : "100%");
}
</style>
<![endif]>
<![endif]-->

<script type="text/javascript">
<!--
function initMenu() {
var points = document.getElementById('nav').getElementsByTagName('li');
for (var i=0; i<points.length; i++) {
points[i].onmouseover = function() {this.className += 'hover';}
points[i].onmouseout = function() {this.className = this.className.replace('hover', '');}
}
}
if (document.all && !window.opera) attachEvent("onload", initMenu);
//-->
</script>

</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="inner">
<div id="left">111</div>
<div id="center"><h3>Install Successful!</h3>
<p>You have successfully installed and configured MODx. We hope you find this site an adequate starting configuration for many small business, organization or personal websites; just change out the template and add your own content and snippets, and you'll be good to go! </p>
<h3>Getting Help</h3>
<p>The <a href="http://modxcms.com/modx-team.html" target="_blank">team behind MODx</a> strives to contantly add to and refine the documentation to help you get up to speed with MODx:</p>
<ul>
<li>For basic instructions on integrating custom templates into MODx, please see the <a href="http://modxcms.com/designer-guide.html" target="_blank">Designer's Guide</a>. </li>
<li>For an introduction to working in MODx from the content editors perspectve, see the <a href="http://modxcms.com/editor-guide.html" target="_blank">Content Editor's Guide</a>. </li>
<li>For a detailed overview of the backend "manager" and setting up Users and Groups, please peruse the <a href="http://modxcms.com/developers-guide.html" target="_blank">Administration Guide</a>.</li>
<li>For developers, architecture and API documentation can be found in the <a href="http://modxcms.com/administration-guide.html" target="_blank">Developer's Guide</a>.</li>
<li>And if someone has installed this site for you, but you're curious as to the steps they went through, please see the <a href="http://modxcms.com/getting-started.html" target="_blank">Getting Started Guide</a>.</li>
</ul>
<p>And don't forget, you can always learn and ask questions at the <a href="http://www.modxcms.com/forums" target="_blank">MODx forums</a>.</p></div>
<div id="right">111</div>
</div>
<div id="clear"></div>
<div id="header">
<div id="logo"><img src="assets/templates/altxsoft/img/logo.jpg" /></div>
<div id="menu"><ul id="nav">
<li>
<a class="active" href="http://test1.ru/" title="Русский" >Русский</a>
<ul>
<li>
<a href="/index.php?id=2" title="????? ??????" >1</a>

</li>
<li>
<a href="/index.php?id=3" title="????? ??????" >????? ??????</a>

</li>
<li>
<a href="/index.php?id=4" title="????? ??????" >????? ??????</a>

</li>
<li>
<a class="last" href="/index.php?id=5" title="????? ??????" >????? ??????</a>

</li>

</ul>
</li>
<li>
<a href="/index.php?id=6" title="Продукты" >english</a>
<ul>
<li>
<a href="/index.php?id=8" title="????? ??????" >????? ??????</a>

</li>
<li>
<a class="last" href="/index.php?id=9" title="????? ??????" >????? ??????</a>

</li>

</ul>
</li>
<li>
<a href="/index.php?id=7" title="хрень" >123213</a>
<ul>
<li>
<a href="/index.php?id=10" title="????? ??????" >????? ??????</a>

</li>
<li>
<a class="last" href="/index.php?id=11" title="????? ??????" >????? ??????</a>

</li>

</ul>
</li>
<li>
<a href="/index.php?id=12" title="типо товар" >типо товар</a>

</li>
<li>
<a href="/index.php?id=13" title="деньги" >деньги</a>

</li>
<li>
<a class="last" href="/index.php?id=14" title="эм цены" >эм цены</a>

</li>

</ul></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>


А вот css:
* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: Verdana;
    font-size: 11px;
    font-weight: normal;
}
#outer {
min-height:100%;
width:950px;
text-align:left;
margin:auto;
position:relative;
overflow:visible;
padding-bottom: 10px;
padding-top:20px;
}
#inner {
width:100%;
}
#left {
position: relative;
width: 190px;
float: left;
}
#center {
position: relative;
padding-top:140px;
width: 480px;
float: left;
}
#right {
position: relative;
width: 190px;
float: right;
}
#header {
position:absolute;
top:0px;
left:0px;
width:570px;
margin:0 180px 0 180px;
height:129px;
z-index:74;
padding-top:20px;
}
#logo {
padding-left:10px;}
/* ///////// Menu ///////// */
#menu {
    text-transform: uppercase;
}

#menu ul {
    list-style: none;
}

#menu li {
    position: relative;
    display: inline;
    background: #afb0bc;
    width: 188px;
    height: 30px;
    border: 1px #fff solid;
    float: left;
}

#nav a {
    padding: 5px 0px 5px 5px;
    width: 183px;
    line-height: 20px;
    text-decoration: none;
    display: block;
    color: #fff;
}

#menu li ul li a {
    color: #7b7b85;
    background: #e7e7e7;
}

#nav .active {
    background: #ca2744;
}

#nav a:hover {
    background: #f4f4f4;
    color: #ca2744;
}

#menu li ul li a:hover {
    background: #f2f2f2;
}

#menu li ul {
    position: absolute;
    top: 29px;
    left: -1px;
    display: none;
    padding-top: 2px;
}

#nav li.hover ul, #nav li:hover ul {
    display: block;
}

* html #menu ul li {
    height: 1%;
}

* html #menu ul li a {
    height: 1%;
}

#menu li:hover {
    z-index: 1000;
}
/* ///////////////////////// */
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 20.10.2008, 4:28; Ответить: gerasim13
Сообщение #4


Так и не нашёл как заставить правильно работать хувер в 6 эксплорере=( :achtung::achtung::achtung:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 20.10.2008, 12:38; Ответить: Exterior
Сообщение #5


gerasim13, замените имеющийся скрипт на этот:
<script type="text/javascript">
<!--
function initMenu() {
var points = document.getElementById('nav').getElementsByTagName('li');
var zi = 10000;
for (var i=0; i<points.length; i++) {
points[i].onmouseover = function() {this.className += 'hover';}
points[i].onmouseout = function() {this.className = this.className.replace('hover', '');}
points[i].style.zIndex = zi--;
}
}
if (document.all && !window.opera) attachEvent("onload", initMenu);
//-->
</script>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 21.10.2008, 4:24; Ответить: gerasim13
Сообщение #6


спасибо. помогло. есть тут ещё один косяк. дизайнерша нарисовала макет, никак не могу найти как это все сверстать так что бы работало.
Нужно что бы два блока (слева и справо) все гда были внизу. Пробовал, плясал вокруг них ничего не получается.
Вот то что у меня сейчас получилось: altx-soft.ru
В общем даже идеи нет как это реализовать. Может кто нибудь видел готовую страничку, код подсмотреть. Или почитать что нибудь что бы понять как это реализовать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 21.10.2008, 12:24; Ответить: Galen
Сообщение #7


Может кто нибудь видел готовую страничку, код подсмотреть. Или почитать что нибудь что бы понять как это реализовать.

Блок внизу одной из колонок
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 21.10.2008, 15:54; Ответить: gerasim13
Сообщение #8


Спасибо! Отличный ресурс!

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
 1 Викторио_mw 1469 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
 2 boltuk 3416 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
 1 lepota 1130 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
 0 Olya_Poy 4648 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
 0 SPiar 4817 28.9.2017, 17:45
автор: -korotkov-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 12:45

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet