Справка по HTML меню - PullRequest
Новая
       10

Справка по HTML меню

0 голосов
/ 11 февраля 2009

У меня есть дизайн страницы со следующим меню: 

Cat1    |     Cat2    |    Cat 3    |    Cat 4

Когда я наведите курсор на слово Cat2, bgcolor всей коробки Cat2 меняется на синий цвет. Кроме того, вся ячейка должна быть кликабельной и связанной с другой страницей.

Я могу сделать это без символа "|" изменив bgcolor ячейки таблицы и сделав ширину "тега" до 100% и высоту "тега" до 30 пикселей Но я не могу понять, как добавить символ разделителя "|" в нем.

У кого-нибудь есть идеи по этому поводу?

Ответы [ 5 ]

2 голосов
/ 11 февраля 2009

Поставить границу слева в CSS? Или это должен быть буквальный символ?

1 голос
/ 11 февраля 2009

Это соответствует всем требованиям без единого; Вертикальная черта должна быть короче высоты ссылки.

Возможно, проще всего добиться этого с помощью фонового изображения на , а не с помощью границ или труб (|).

Я попробовал кое-что с интервалами внутри ссылок, которые были бы короче, чем полная высота буквы А, но я не мог получить его рендеринг чисто.

Вы также можете добавить каналы в сам HTML, внутри span, и скрыть их при наведении.

Я знаю, что это не будет работать должным образом во всех браузерах, но хаки и обходные пути являются дополнительными. : P

EDIT :: Я добавил смежные селекторы @Fistandantilus к этому. делает для чистого HTML. 

       <html>
    <head>
        <title>Menu Test</title>


    <style type="text/css" media="screen">
        ul.menu { 
            display:block;
            margin:0; 
            padding:0;
            height:30px;
        }
        ul.menu li {
            display:block;
            width:100px;
            height:30px;
            float:left;

        }        

        ul.menu li a{
            width:100%;
            height:30px;
            line-height:30px;
            display:block;
            text-align:center;
            border-left:1px solid transparent;
        }
        ul.menu li + li a { 
            border-left:1px solid #000;
        }

        ul.menu li a:hover {
            background-color:#0f0;
            border-left:1px solid transparent;
        }
        ul.menu li:hover + li>a  {
            border-left:1px solid transparent;

        }



    </style>
    </head>


    <body>
        <ul class="menu">
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>

        </ul>
    </body>
</html>
1 голос
/ 11 февраля 2009

Вы можете использовать смежные селекторы одноуровневых элементов в CSS, применяя стили к элементам на основе элементов, которые непосредственно перед ними, вы можете создавать разделители меню. 

.menu a {
    text-decoration: none;
    padding: 10px;
}
.menu a + a {
    border-left:solid 1px black;
}

Используя этот подход, вы можете легко применить этот стиль к любому из ваших меню, назначив class = "menu". 

<div class="menu">
    <a href="#">Questions</a>  
    <a href="#">Tags</a> 
    <a href="#">Users</a> 
    <a href="#">Badges</a>
    <a href="#">Unanswered</a>
</div>
0 голосов
/ 11 февраля 2009

Меню навигации должны быть семантически размечены как списки. Использование неупорядоченного списка - очень распространенная практика для такого меню. См. этот пример на Listamatic для обоснования, из которого можно сделать вывод. Чтобы фоновый цвет был больше, чем текст, вам просто нужно добавить отступ вокруг тега <a>.

0 голосов
/ 11 февраля 2009

Вам не нужно использовать таблицы, CSS - ваш друг для такого рода вещей!

Я не веб-дизайнер, и мои навыки работы с html / css немного ржавые, но что-то вроде этого вы хотите? 

<html>

<head>

<style type="text/css">
#menu {
text-align: center;
}
#menu a {
text-decoration: none;
padding: 5px 40px;
}
#menu a:hover {
background-color: blue;
color: white;
}
</style>

</head>

<body>

<div id="menu">
<a href="#">Cat 1</a> |
<a href="#">Cat 2</a> |
<a href="#">Cat 3</a> |
<a href="#">Cat 4</a>
</div>

</body>


</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...