Tabel to css горизонтальная навигационная панель - PullRequest
Новая
       5

Tabel to css горизонтальная навигационная панель

0 голосов
/ 23 февраля 2012

У меня есть горизонтальное меню / панель навигации, которая в настоящее время размещена с использованием таблицы из двух строк. Он отлично работает как есть, но я хотел бы знать, как создать его, не используя таблицу, если это возможно. Я потратил большую часть нескольких дней, пробуя всевозможные блоки div / spans / uls float / inline и т.д., но безрезультатно. Основные ограничения:

> IE7 +, FF3 +
> Новое решение должно оставаться визуально и функционально неизменным (для пользователя).
> Пункты меню не имеют одинаковую ширину и могут меняться.
> Высота строки составляет 26 пикселей для размещения фонового изображения, которое обеспечивает вид «кнопки».

Вот рабочий пример с использованием таблицы: Горизонтальная строка меню

Итак, есть предложения? (или полные решения :) Спасибо за любую помощь! 

<!DOCTYPE HTML><html><head>
<title>Nav Bar Test</title>

<style>
body { font-family: arial; }

.page-wrapper {
   width: 850px; margin: auto; border: solid  02px  black; background: cyan;}

table.menu_bar {
   width    : 100%;
   font-size: .9em;
   border-style   : none;
   border-collapse: collapse;
   }

table.menu_bar td {
   background-color: white;
   border-width    : 1px;
   padding         : 0px;
   border-style    : solid;
   border-color    : #555;
   }

.menu_bar a {
   display          : block;
   height           : 26px;
   color            : black;
   text-align       : center;
   text-decoration  : none;
   background       : url(GRAY_bg1.PNG);
   background-repeat: repeat;
   background-color : silver;
   overflow         : hidden;
   }

.menu_bar a:hover {
   background: url(RED_bg1.PNG); background-color : red;}

.menu_bar a:active {
   background: url(RED_bg2.PNG); background-color : #F55;}

.menu_bar div { margin-top: 4px; }
</style>

</head>

<body><div class="page-wrapper"><br>

<table class="menu_bar" ><tr>
   <td><a href="#" class="menu_bar"><div>Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Very Long Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Long Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Item </div></a></td>
   <td><a href="#" class="menu_bar"><div>Menu Item</div></a></td>
</tr></table>

<br></div><!--End page-wrapper--></body></html>

1 Ответ

0 голосов
/ 23 февраля 2012

Если бы не IE7, вы могли бы использовать display: table/table-row/table-cell, чтобы любой элемент действовал как таблица. К сожалению, без отображения: таблица очень трудно выполнить то, что вам нужно, без использования таблицы.

Я действительно написал плагин давным-давно, который заставляет плавающий список элементов занимать всю ширину их родительского элемента: http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/ Он очень ограничен и может не работать с новыми версиями jQuery.

...