Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » Меню в обьявлении

Меню в обьявлении

Страница: 1

Сообщений 1 страница 8 из 8

1

  • Автор: Swetynasty
  • Заслуженный
  • Зарегистрирован: Пн, 28 Июн 2010
  • Сообщений: 284
  • Уважение: +3
  • Позитив: +77
  • Пол: Женский
  • Последний визит:
    Сб, 22 Авг 2020 19:23:36

Такой возник вопрос:
В этой теме обсуждалось меню в обьявлении
Оформление страницы
Я все поняла, работает, но проблема с тем, что при нажатии заголовка перебрасывает вверх форума, что очень не удобно.
Так у меня происходит и в опере и в эксплоре. Хотя знаю форумы где у меня такое не происходит. Может что то с кодом?

0

2

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4739
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

Swetynasty
Здравствуйте.

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>

0

3

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51719
  • Уважение: +15537
  • Позитив: +12338
  • Последний визит:
    Сегодня 12:25:00

rps :glasses:  Я думаю что вариант без дерганий пройдет ежели менять z-index (0-100 к примеру ) и cкрывать visibility:hidden; при position:absolute для  class="submenutext"

Отредактировано Deff (Вс, 12 Дек 2010 17:32:58)

0

4

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4739
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

Deff
"Дёргания" происходят от того, что в ссылка присутствует октоторп, вроде href="#". Эта конструкция изначально предполагает переход к определённому элементу с указанным названием после октоторпа, то есть это как бы "ссылки внутри документа". Однако, так как в том варианте меню после октоторпа ничего не было указано, он просто поднимал к верху страницы при клике на любой пункт.
Позиционирование и видимость здесь ни при чём.

+1

5

  • Автор: Swetynasty
  • Заслуженный
  • Зарегистрирован: Пн, 28 Июн 2010
  • Сообщений: 284
  • Уважение: +3
  • Позитив: +77
  • Пол: Женский
  • Последний визит:
    Сб, 22 Авг 2020 19:23:36

rps да спасибо.

Но вот возник еще вопрос: (или просьба) как сделать так что бы первый "заголовок" всегда был открыт а не пропадал с обновлением страницы?...

0

6

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4739
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

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>

0

7

  • Автор: Swetynasty
  • Заслуженный
  • Зарегистрирован: Пн, 28 Июн 2010
  • Сообщений: 284
  • Уважение: +3
  • Позитив: +77
  • Пол: Женский
  • Последний визит:
    Сб, 22 Авг 2020 19:23:36

rps прошу прощение... а можно что бы не при наведении информация менялась а при нажатии на "Название 1 Название  2 Название 3 Название 4" ....?)

0

8

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4739
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

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>

0

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » Меню в обьявлении