Сделать простое, горизонтальное и резиновое css меню проще простого. Есть несколько способов:
1. Можно использовать таблицу и процентное отношение каждой ячейки, но способ неудобный, по тому что во-первых таблицы не есть гуд, во-вторых если у нас изменятся количество пунктов меню или размер строки, то прийдется переделывать на глаз все процентные размеры каждой ячейки.
2. Использовать списки ul, li. Причем каждому элементу задавать css свойство float:left. Способ довольно неплохой и распространенный. Например в движке Wordpress, меню формируется именно в таком виде и мы очень легко можем придавать ему любой стиль и вид.
3. Использовать выравнивание текста justify. Если объяснять коротко, то после применения выравнивания justify все строки текста, кроме последней растягиваются на всю возможную ширину блока, по этому, для получения нужного эффекта нам нужно растянуть только одну строку. Мы добавляем длинный строковый inline элемент, который не помещается в первой строке и, следовательно, переносится на вторую, заставляя тем самым первую (наше меню) растянутся по всей ширине. В качестве такого элемента можно использовать пустой рисунок (Обычной называют blank.gif имеющий размер 1×1 пиксель) или любой строковый элемент с большим значением отступа.
Если я вас запутал, то сразу под катом кусок кода и ссылка на пример.
css
.menu {
text-align:justify !important;
width:80%;
background-image: url('fon.gif');
margin:20px auto 0;
padding:5px 10px;
height:15px;
overflow:hidden;
}
.menu a {
color:white;
text-decoration:none;
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
.menu a:hover {
text-decoration:underline;
background-color: #69ace3;
}
html
<div class="menu"> <a href="#">Главная</a> <a href="#">Дизайн</a> <a href="#">Верстка и кодинг</a> <a href="#">pro100design.net</a> <img src="blank.gif" width="99%" height="1" alt=""> </div>
Кому ничего не понятно, смотрите рабочий пример меню.
Скачать готовый скрипт css меню (4кб)
Если есть вопросы, задавайте в комментариях.
Ну, прежде всего, не могу не согласиться с элегантностью вашего решения.
Но я категорически не согласен с 1-м пунктом. Так бы и написали: “я – таблицефоб”)))
“тому что во-первых таблицы не есть гуд” – отличная причина. А с каких это пор таблицы не есть гуд? Табличная верстка, кстати, наиболее кросбраузерная. А “процентное отношение каждой ячейки” тут попросту указывать не нужно, если оно не прописано, браузер сам его рассчитывает, исходя из количества колонок и их содержания.
Да, если в табличной верстке не указывать процент оно будет распределять само, но выглядеть это будет хорошо, только если пункты меню будут по длине примерно одинаковые ))
А можно пример без картинки? А то у меня не получается с “любой строковый элемент с большим значением отступа.”
Без этого не как, скачайте архив с меню. Там все понятно.
а как сделать резиновое ховер меню с закругленными краями без цсс 3 и жс???
кто поможет???
Не согласен, это не самый лучший способ…
Мыслите глобальнее…!
#CSS
.menu {
width: 100%:
padding: 5px 0px 5px 0px;
}
.menu {
display: inline-block;
width: 25%; /* 100% / число рубрик(Item 1..n) у нас 4 */
}
#HTML
Item 1
Item 2
Item 3
Item 4
Вы молодец конечно, но если между словами в пределах одного пункта меню пробелы не заменить на как Вы сделали в своём примере, то каждое отдельное слово в одном теге в меню расползается по ширине, как будто это самостоятельный пункт меню.
Привет! давно хотела сделать такое меню, но не знала как, тем более css только начала изучать. от всех этих правил и селекторов схожу с ума:) Ну так вот, попыталась внедрить это меню – 3 часа возилась:) пришлось кое-что под разметку моего сайта изменить, чтобы все получилось, и о да!! получилось!! для меня это громадное достижение, тем более, что в моей семье веб-дизайном никто не занимается, муж бы и рад мне помочь, да сам не в теме… а я как сделала – 5 минут по квартире от радости носилась:)))