Как получить эффект наведения треугольника на чистую CSS-панель навигации? - PullRequest
Новая
       14

Как получить эффект наведения треугольника на чистую CSS-панель навигации?

3 голосов
/ 12 января 2012

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

css navbar

Ответы [ 3 ]

11 голосов
/ 13 января 2012

Я думаю, это то, что вы ищете:

Fiddle

Также, пожалуйста, используйте семантическую разметку:

  1. Если вы используете HTML5, оберните вашу навигацию в <nav> теги.
  2. Ваши ссылки (если они действительно будут ссылками) должны быть <a> элементами.
  3. Для получения списка похожих ссылок рекомендуется использовать список (<ul> & <li>).
2 голосов
/ 13 января 2012

Здесь - это модификация вашего jsfiddle :

Я добавил <span class="arrow"></span>, чтобы содержать треугольники в HTML: 

<div class="tab_container">
    <div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
    <div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
    <div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
    <div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
    <div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>

Вот изменения, внесенные в ваше меню, которые уменьшают размер треугольника и располагают их в центре нижней части каждого элемента меню при наведении курсора мыши: CSS: 

/*
.accordion_headings:hover{
    background:#00CCFF;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;
}
*/
.accordion_headings{
    position:relative;
}
.accordion_headings .arrow{
    display:none;
}
.accordion_headings:hover .arrow{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;

    display:block;
    position:absolute;
    bottom:0;
    left:49%;
}
0 голосов
/ 12 января 2012

Вот скрипка , в которой используется фоновое изображение, которое будет отображаться над элементом меню наведения. Это не красиво, но дальше CSS должен помочь с этим.

UPDATE

Извините, я неправильно понял это. Вот рабочая скрипка с меньшей стрелкой, указывающей в правильном направлении.

...