Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/30: Рейтинг темы: голосов - 30, средняя оценка - 4.60
7 / 7 / 2
Регистрация: 16.11.2011
Сообщений: 251
1

Стрелка в навигационном меню (активный пункт)

22.11.2013, 15:01. Просмотров 6004. Ответов 4
Метки нет (Все метки)

Здравствуйте. У меня меню в виде вкладок. На активном пункте меню (вкладке) нужна стрелка, как ее прикрутить с помощью стилей?
0
Миниатюры
Стрелка в навигационном меню (активный пункт)  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.11.2013, 15:01
Ответы с готовыми решениями:

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

Выделить активный пункт в многоуровневом меню
Есть код вида: <ul> <li><a>Пункт</a> <ul> <li><a>Подпункт</a></li> </ul> </li> ...

Настройка меню CSS активный пункт
Ребят помогите с меню, просто уже мозг взрывается, вроде и простая задачка но не выходит. Имеем:...

Выделить цветом активный пункт меню
Здравствуйте есть меню с несколькими подменю нужно выделить цветом активный пункт подменю в...

__________________
4
13194 / 6581 / 1040
Регистрация: 10.01.2008
Сообщений: 15,069
22.11.2013, 15:19 2
http://cssarrowplease.com/

Делаем (там) border = 0 и перекрашиваем цвет border'а :after в белый.

Добавлено через 4 минуты
Нет, все не так просто. Но напильником доработать несложно. Нужно поменять позиционирование, а также порядок и цвет border'ов.
1
7 / 7 / 2
Регистрация: 16.11.2011
Сообщений: 251
22.11.2013, 17:43  [ТС] 3
Отдельно сделать стрелку несложно. Я пытаюсь прикрутить ее к шаблону Bootstrap. И никак не получается. Может я не тот класс редактирую?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="tabbable tabs-below">
  
  <ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Главная</a>
  </li> 
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Контакты</a></li>
</ul>
</div>
 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus 
 
{
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 10px solid;
  
  border-top-color: blue;
  /*border: 10px solid;*/
 
  border-top-color: yellow;
}
.active:after{
    content: '';
  position: absolute;
 
  width: 0;
  height: 0;
  border: 20px solid;
  border-top-color: blue;
  
    
}
0
Изображения
 
7 / 7 / 2
Регистрация: 16.11.2011
Сообщений: 251
22.11.2013, 22:52  [ТС] 4
Решил сделать стрелку как фоновое изображение. Не подскажите как сделать выравнивание картинки по центру и прижатой к верху?
0
67 / 67 / 11
Регистрация: 20.11.2013
Сообщений: 282
22.11.2013, 23:45 5
background-position: top center;
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.11.2013, 23:45

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как сделать, чтобы при наведении на пункт меню двигалась стрелка
Здравствуйте! Подскажите пожалуйста, как сделать такое меню, чтобы при нажатии на пункт меню...

Активный пункт меню
Добрый день, помогите решить задачку. Задача такая, на сайте (сайт на joomla 2.5.7) есть основное...

Активный пункт меню
Добрый день! Помогите, пожалуйста. Есть вот такое меню. &lt;ul id=&quot;nav&quot;&gt; &lt;li&gt;&lt;a...

Не активный пункт меню!
Ребят, подскажите! Есть форма - в ней меню. Ну там файл, справка и т. д. Как мне сделать не...

Активный пункт меню
сделал табличку, в каждую яцейку поместил пункт меню придал им стил. задача при клике по пукту он...

Активный пункт меню
Есть кусок кода меню сайта &lt;div id=&quot;menu&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;&lt;?php echo $home;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.