Jump to content
  • 0

Резиновое меню при помощи таблицы


Bryant-24
 Share

Question

Я начал заниматься версткой совсем недавно и хотел бы узнать. Хочу сделать резиновое меню на сайте, но возник один вопрос - можно ли сделать меню через таблицу, как показано на рисунке:2217899.jpgСейчас поясню, то есть каждая ячейка (кроме 1 и 2 на рисунке) при наведении будут выдавать выпадающий список. При этом, насколько я понимаю, при наведении на ячейку, выпадающий список появляется в виде таблицы. Возможно ли это?

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Почему выбрал именно через таблицы - потому что с ее помощью легче будет расставить по углам рисунок (1 и 2 ячейка) и задать 100% ширину экрана. А еще поводом послужило следующее, на рисунке видно, что мне необходимо, чтобы после выпадающего списка была декоративная рамка. 2203562.jpg

Edited by Bryant-24
Link to comment
Share on other sites

  • 0

Единственная необходимость таблицы в данном случае это сделать меню шириной 100% и чтобы пункты занимали автоматическую ширину, как это делают ячейки. Но это редко используется. Ниспадающее меню может занимать фиксированный размер, а "ячейки" иметь одну ширину. Тогда <ul>,<li> дают больше преимуществ.

Link to comment
Share on other sites

  • 0

Начал верстать меню, и не совсем понимаю, почему выпадающий список уходит вправо, и как сделать так, чтобы пункты горизонтального меню выделялись полностью.

Вот что имею:

2226103.png

А вот, что необходимо получить:

2210743.png

Ну и собственно коды, index.html:

<!--меню-->
<table id="menu">
<tr id="menu_bg">
<td id="menu_left"></td>
<td id="menu_td">
<ul class="menu_ul">
<li><a href="">Об агенстве</a>
<ul>
<li><a href="">Как нас найти</a></li>
<li><a href="">О нас</a></li>
<li><a href="">Принцип работы</a></li>
<li><a href="">Наши сотрудники</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu_td">
<ul class="menu_ul">
<li><a href="">Работадателю</a>
<ul>
<li><a href="">Советы по подбору <br> персонала</a></li>
<li><a href="">Оформить заявку</a></li>
<li><a href="">Прайс-лист</a></li>
<li><a href="">Как написать <br> рекомендательное <br> письмо</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu_td">
<ul class="menu_ul">
<li><a href="">Соискателю</a>
<ul>
<li><a href="">Советы по поиску <br> работы</a></li>
<li><a href="">Заполнить анкету</a></li>
<li><a href="">Собеседование в <br> агенстве</a></li>
<li><a href="">Вакансии</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu_td">
<ul class="menu_ul">
<li><a href="">Домашний персонал</a>
<ul>
<li><a href="">Няня</a></li>
<li><a href="">Гувернантка</a></li>
<li><a href="">Домработница</a></li>
<li><a href="">Семейная пара</a></li>
<li><a href="">Семейный водитель</a></li>
<li><a href="">Повар</a></li>
<li><a href="">Сиделка</a></li>
<li><a href="">Репетитор</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu_td">
<ul class="menu_ul">
<li><a href="">Услуги мамам</a>
<ul>
<li><a href="">Описание услуг</a></li>
<li><a href="">Молодая мама</a></li>
<li><a href="">Деловая мама</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu_td">
<ul class="menu_ul">
<li><a href="">Вопросы и отзывы</a>
<ul>
<li><a href="">Задать вопрос</a></li>
<li><a href="">Вопросы и ответы</a></li>
<li><a href="">Отзывы</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu_td">
<ul class="menu_ul">
<li><a href="">Статьи</a></li>
</ul>
</td>
<td id="menu_right"></td>
</tr>
</table>

И style.css:

/*меню сайта*/
#menu {
height: 51px;
width: 100%;
}

#menu_bg {
background: url(images/menu.png);
}

#menu_left {
background: url(images/menu_left.png) no-repeat;
width: 24px;
}

#menu_right {
background: url(images/menu_right.png) no-repeat;
width: 24px;
}

.menu_td {
height: 51px; /*высота ячеек*/
}

.menu_ul{
display: table-cell; /*внутренние списки выровнены по середине*/
vertical-align: middle;
}

.menu_ul li {
float: left; /* элементы списков всплывают влево */
}
.menu_ul ul li {
float: none; /* отменяем всплытие для внутренних элементов списков */
}
.menu_ul a {
display: block; /* делаем ссылки блоками */
color: #fff; /* цвет текста ссылок */
text-decoration: none; /* убираем подчеркивание */
white-space: nowrap; /* запрещаем перевод строк */
padding: 5px 3px; /* внутренние отступы */
}

.menu_ul ul a {
min-width: 150px; /* минимальная ширина подпунктов */
}

.menu_ul ul {
position: absolute; /* абсолютное позиционирование внутренних списков */
display: none; /* скрываем внутренние списки */
}
.menu_ul li:hover ul, .menu_ul li.ie6 ul {
display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */
}
.menu_ul li:hover ul a, .menu_ul li.ie6 ul a {
color: #fff; /* цвет текста внутренних ссылок */
background: #DD8510; /* цвет фона */
}
.menu_ul li:hover a, .menu_ul li ul a:hover, .menu_ul li.ie6 a {
color: #fff; /* цвет текста внешних ссылок при наведении курсора на LI,
а также внутренних ссылок при наведении курсора на них самих */
background: #BC710D; /* фон */
}

Подскажите, как это исправить? :unsure:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy