Такой возник вопрос:
В этой теме обсуждалось меню в обьявлении
Оформление страницы
Я все поняла, работает, но проблема с тем, что при нажатии заголовка перебрасывает вверх форума, что очень не удобно.
Так у меня происходит и в опере и в эксплоре. Хотя знаю форумы где у меня такое не происходит. Может что то с кодом?
Меню в обьявлении
Сообщений 1 страница 8 из 8
Поделиться1Вс, 12 Дек 2010 15:23:31
Поделиться2Вс, 12 Дек 2010 17:19:41
Swetynasty
Здравствуйте.
Такой возник вопрос: В этой теме обсуждалось меню в обьявленииОформление страницыЯ все поняла, работает, но проблема с тем, что при нажатии заголовка перебрасывает вверх форума, что очень не удобно. Так у меня происходит и в опере и в эксплоре. Хотя знаю форумы где у меня такое не происходит. Может что то с кодом?
Попробуйте такой вариант:
<style type="text/css"> #menu { padding-left: 20px; } #menu a { padding: 7px 30px 7px; margin-right: 5px; display: block; margin: 10px 0; width: 100px; text-decoration: none; cursor: pointer; } #submenu { padding: 5px; height: 100px; text-align: center; font-size: 12px; width: 700px; } .submenutext { display: none; height: 60px; } #submenu A { color: #CCC; } #menu .tabactive { color: #65065f; } </style> <script type="text/javascript"><!-- var prevmenu, prevtab function subMenu(obj, menu) { if (document.getElementById) { if (prevmenu) document.getElementById(prevmenu).style.display = "none" document.getElementById(menu).style.display = "block" if (prevtab) { prevtab.className = "" } obj.className = "tabactive" prevmenu = menu prevtab = obj } } // --></script> <table style="width: 100%;" border="0"> <tbody> <tr> <td style="width: 25%;"> <div id="menu"> <a onmouseover="subMenu(this,'sm1')">Название 1</a> <a onmouseover="subMenu(this,'sm2')">Название 2</a> <a onmouseover="subMenu(this,'sm3')">Название 3</a> <a onmouseover="subMenu(this,'sm4')">Название 4</a> <a onmouseover="subMenu(this,'sm5')">Название 5</a> </div> </td> <td align="center"> <div id="submenu"> <div id="sm1" class="submenutext"><br /><br />тут текст 1</div> <div id="sm2" class="submenutext"><br /><br />тут текст 2</div> <div id="sm3" class="submenutext"><br /><br />тут текст 3</div> <div id="sm4" class="submenutext"><br /><br />тут текст 4</div> <div id="sm5" class="submenutext"><br /><br />тут текст 5</div> </div> </td> </tr> </tbody> </table>
Поделиться3Вс, 12 Дек 2010 17:32:36
rps Я думаю что вариант без дерганий пройдет ежели менять z-index (0-100 к примеру ) и cкрывать visibility:hidden; при position:absolute для class="submenutext"
Отредактировано Deff (Вс, 12 Дек 2010 17:32:58)
Поделиться4Вс, 12 Дек 2010 17:48:35
Deff
"Дёргания" происходят от того, что в ссылка присутствует октоторп, вроде href="#". Эта конструкция изначально предполагает переход к определённому элементу с указанным названием после октоторпа, то есть это как бы "ссылки внутри документа". Однако, так как в том варианте меню после октоторпа ничего не было указано, он просто поднимал к верху страницы при клике на любой пункт.
Позиционирование и видимость здесь ни при чём.
Поделиться5Вс, 12 Дек 2010 20:54:12
rps да спасибо.
Но вот возник еще вопрос: (или просьба) как сделать так что бы первый "заголовок" всегда был открыт а не пропадал с обновлением страницы?...
Поделиться6Вс, 12 Дек 2010 21:51:15
Swetynasty
Так попробуйте:
<style type="text/css"> #menu { padding-left: 20px; } #menu a { padding: 7px 30px 7px; margin-right: 5px; display: block; margin: 10px 0; width: 100px; text-decoration: none; cursor: pointer; } #submenu { padding: 5px; height: 100px; text-align: center; font-size: 12px; width: 700px; } .submenutext { display: none; height: 60px; } #submenu A { color: #CCC; } #menu .tabactive { color: #65065f; } </style> <script type="text/javascript"><!-- var prevmenu, prevtab function subMenu(obj, menu) { if (document.getElementById) { if (prevmenu) document.getElementById(prevmenu).style.display = "none" document.getElementById(menu).style.display = "block" if (prevtab) { prevtab.className = "" } obj.className = "tabactive" prevmenu = menu prevtab = obj } } // --></script> <table style="width: 100%;" border="0"> <tbody> <tr> <td style="width: 25%;"> <div id="menu"> <a onmouseover="subMenu(this,'sm1')">Название 1</a> <a onmouseover="subMenu(this,'sm2')">Название 2</a> <a onmouseover="subMenu(this,'sm3')">Название 3</a> <a onmouseover="subMenu(this,'sm4')">Название 4</a> <a onmouseover="subMenu(this,'sm5')">Название 5</a> </div> </td> <td align="center"> <div id="submenu"> <div id="sm1" class="tabactive"><br /><br />тут текст 1</div> <div id="sm2" class="submenutext"><br /><br />тут текст 2</div> <div id="sm3" class="submenutext"><br /><br />тут текст 3</div> <div id="sm4" class="submenutext"><br /><br />тут текст 4</div> <div id="sm5" class="submenutext"><br /><br />тут текст 5</div> </div> </td> </tr> </tbody> </table>
Поделиться7Чт, 3 Фев 2011 14:23:31
rps прошу прощение... а можно что бы не при наведении информация менялась а при нажатии на "Название 1 Название 2 Название 3 Название 4" ....?)
Поделиться8Пт, 4 Фев 2011 00:20:22
Swetynasty
<style type="text/css"> #menu { padding-left: 20px; } #menu a { padding: 7px 30px 7px; margin-right: 5px; display: block; margin: 10px 0; width: 100px; text-decoration: none; cursor: pointer; } #submenu { padding: 5px; height: 100px; text-align: center; font-size: 12px; width: 700px; } .submenutext { display: none; height: 60px; } #submenu A { color: #CCC; } #menu .tabactive { color: #65065f; } </style> <script type="text/javascript"><!-- var prevmenu, prevtab function subMenu(obj, menu) { if (document.getElementById) { if (prevmenu) document.getElementById(prevmenu).style.display = "none" document.getElementById(menu).style.display = "block" if (prevtab) { prevtab.className = "" } obj.className = "tabactive" prevmenu = menu prevtab = obj } } // --></script> <table style="width: 100%;" border="0"> <tbody> <tr> <td style="width: 25%;"> <div id="menu"> <a onclick="subMenu(this,'sm1')">Название 1</a> <a onclick="subMenu(this,'sm2')">Название 2</a> <a onclick="subMenu(this,'sm3')">Название 3</a> <a onclick="subMenu(this,'sm4')">Название 4</a> <a onclick="subMenu(this,'sm5')">Название 5</a> </div> </td> <td align="center"> <div id="submenu"> <div id="sm1" class="tabactive"><br /><br />тут текст 1</div> <div id="sm2" class="submenutext"><br /><br />тут текст 2</div> <div id="sm3" class="submenutext"><br /><br />тут текст 3</div> <div id="sm4" class="submenutext"><br /><br />тут текст 4</div> <div id="sm5" class="submenutext"><br /><br />тут текст 5</div> </div> </td> </tr> </tbody> </table>