Как сделать такое меню?

#1 26 октября 2013 в 13:56

Нужно что бы при наведении текст выглядел как на картинке, округленные края и указатель внизу. Очень долго уже бьюсь головой и не знаю как реализовать. Прошу вашей помощи. На данный момент код выглядит так:

#topmenu .menu li a:hover{background:url(../images/fon_menu.png) top center;
border-radius:3px;
-moz-border-radius:3px;
color:#fff !important;
}

не знаю как приставить стрелку.

Буду очень благодарен за помощь!

#2 26 октября 2013 в 17:39

Я делаю так

<div class="11">
<div class="22">Текст</div>
</div>

Для class="11" делаю background

background: url('../images/1212.png') no-repeat 129px 29px;

Это и есть стрелка — размещаю где надо.
А для class="22" Делаем черный фон, цвет текста и все остальное.

Вот вам рабочий пример.

Спойлер

<style>
.q11 {
width: 153px;
height: 45px;
position: absolute;
padding: 5px;
background: url('http://takeskill.com/images/icons/11.png') no-repeat 129px 29px;
}
 
.q22 {
font-size: 15px;
color: #f00;
font-weight: bold;
border: 3px solid #f00;
text-align: center;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
 
.q33{
width: 75px;
height: 45px;
position: absolute;
padding: 45px;
background: url('http://takeskill.com/images/icons/11.png') no-repeat 79px 69px;
}
 
.q44 {
font-size: 15px;
color: #FFF;
font-weight: bold;
border: 3px solid #000;
text-align: center;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
background: #000;
}
</style>
 
<div class="q11">
<div class="q22">50</div>
</div>
 
<div class="q33">
<div class="q44">Кнопка</div>
</div>

Еще хотел бы обратить ваше внимание на такие примеры
.tip-twitter (ala Twitter)

Вот оочень много примеров.

Просто так...

#3 26 октября 2013 в 19:25

Braza33, напиите в личке — помогу (несколько вариантов есть, непонятно какой именно вам более подходит — не будем простыни на сайте стелить)

Украинский для инстант

Нужна помощь для мобильной вер

изменение вида Статей.

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Как сделать такое меню?

Похожие темы

Как сделать такое меню

Как сделать аналог меню действий только с кнопкой "Добавить"?

Ссылка "позвонить " в пункте меню

[ЗАКРЫТО] Сделать "меню действий" компактным

Изменить меню действий

Сделать стену в отдельной вкладке.

InstantCMS Team

О проекте

Поддержка

Дополнения