Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 28.01.2010
Сообщений: 15
1

Главное меню

07.12.2013, 08:57. Показов 1121. Ответов 6
Метки нет (Все метки)

Всем привет! имеется некоторое горизонтальное меню (скрин прилагается), хотелось бы с ним сделать следующие чудеса:
- все меню должно быть поделено на 6 равных частей, т.е. у каждой ссылки свое равное место.
- также эти ссылки должны разделяться горизонтальной чертой или чем либо похожим.
- при наведении на текст все пространство отделенное ему (1\6 часть панели) подсвечиваются полностью, также текст меняет цвет.

Буду очень благодарен за ответ!


PS черное меню - это которое имеется, синее - на подобии такого хочется.

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="menu">
<ul>
   <li><a href="/">Как платить</a></li>
   <li><a href="http://...">Как доставят</a></li>
   <li><a href="/">Какие гарантии</a></li>
   <li><a href="/">О магазине</a></li>
   <li><a href="/">Преимущества</a></li>
   <li><a href="/">Отзывы</a></li>
</ul>
</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* menu */
#menu {
    background: #585858;
    border-bottom: 1px solid #000000;
    height: 37px;
    margin-bottom: 15px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    padding: 0px 5px;
    text-align:center;
}
#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
 
}
/* расположение текста относительно гл меню */
#menu > ul > li {
    position: relative;
    float: left;
    z-index: 20;
    padding: 6px 5px 5px 0px;
    
}
#menu > ul > li:hover {
 
}
/* текст ссылок */
#menu > ul > li > a {
    font-size: 13px;
    color: #FFF;
    line-height: 14px;
    text-decoration: none;
    display: block;
    padding: 6px 10px 6px 10px;
    margin-bottom: 5px;
    z-index: 6;
    position: relative;
}
/* при наведении мышкой закругление*/
#menu > ul > li:hover > a {
    background: #000000;
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;*/
 
}
#menu > ul > li > div {
    display: none;
    background: #ffffff;
    position: absolute;
    z-index: 5;
    padding: 5px;
    border: 1px solid #000000;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > a {
    text-decoration: none;
    padding: 4px;
    color: #FFFFFF;
    display: block;
    white-space: nowrap;
    min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
    background: #000000;
}
#menu > ul > li > div > ul > li > a {
    color: #FFFFFF;
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Главное меню   Главное меню  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.12.2013, 08:57
Ответы с готовыми решениями:

Главное меню
Вот с меню ни как не могу разобраться..жумловское меню встает не по центру контейнера меню...как...

не стыкуется главное меню
Есть небольшая проблема с главным меню на сайте ... Присмотритесь, нижняя граница главного меню...

Сделать главное меню по центру страницы
Необходимо сдвинуть главное меню вправо, чтоб оно встало по центру, здесь

Как переместить главное меню в центр
Как переместить главное меню в центр чтобы стояло посередине сайта а не как на скрине слева...

6
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
07.12.2013, 14:38 2
а первый код вы сами писали? если да то что мешает у элементов списка задать нужный градиент,задать нужные значения отступов и прописать hover?
0
0 / 0 / 0
Регистрация: 28.01.2010
Сообщений: 15
10.12.2013, 07:47  [ТС] 3
В том то и дело, что не сам писал(( Вот и хотелось бы разобраться..
0
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
10.12.2013, 22:13 4
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="menu">
    <ul>
       <li><a href="/">Как платить</a></li>
       <li><a href="http://...">Как доставят</a></li>
       <li><a href="/">Какие гарантии</a></li>
       <li><a href="/">О магазине</a></li>
       <li><a href="/">Преимущества</a></li>
       <li><a href="/">Отзывы</a></li>
    </ul>
</div>
</body>
</html>
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
27
28
29
30
31
32
33
* {
    margin: 0;
    padding: 0;
 }
/********************************/
body {
    font: 12px/18px Arial, sans-serif;
    background: #000;
}
#menu ul {
    overflow: hidden;
}
#menu ul li {
 
    border-right: 1px solid #000000;
    float: left;
    list-style: none outside none;
   
    background: url([URL="http://s2.ipicture.ru/uploads/20131210/BM9A2oBv.png"]http://s2.ipicture.ru/uploads/20131210/BM9A2oBv.png[/URL]) repeat-x;
    
}
#menu a {
    text-decoration: none;
    display: block;
    color: #fff;
    padding: 2px 18px;
    border-right: 1px solid #306987;
 
}
#menu a:hover{
    background: #51bcea;
    color:#093566;
}
Добавлено через 8 минут
http://jsfiddle.net/A6GEr/
1
104 / 88 / 21
Регистрация: 19.05.2012
Сообщений: 458
11.12.2013, 09:14 5
HTML5
1
2
3
4
5
6
7
8
<ul>
   <li><a href="/">Как платить</a></li>
   <li><a href="http://...">Как доставят</a></li>
   <li><a href="/">Какие гарантии</a></li>
   <li><a href="/">О магазине</a></li>
   <li><a href="/">Преимущества</a></li>
   <li style="border-right: 1px solid black;" ><a href="/">Отзывы</a></li>
</ul>
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* menu */
#menu {
    background: #0070AF;
    border-bottom: 1px solid #000000;
    height: 37px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    padding: 0px 5px;
    text-align:center;
}
#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
text-align:center;
}
/* расположение текста относительно гл меню */
#menu > ul > li {
    height: 27px;
    position: relative;
    float: left;
    z-index: 20;
    padding: 6px 0px 5px 0px;
    border-left: 1px solid black;
}
#menu > ul > li:hover {
    padding-top: 0px;
    height: 32px;
}
/* текст ссылок */
#menu > ul > li > a {
    font-size: 13px;
    color: #FFF;
    line-height: 14px;
    text-decoration: none;
    display: block;
    padding: 6px 10px 6px 10px;
    margin-bottom: 5px;
    z-index: 6;
    position: relative;
}
/* при наведении мышкой закругление*/
#menu > ul > li:hover > a {
    padding-top: 12px;
    height: 20px;
    background: #45B8E9;
    color: 003E6C;
}
#menu > ul > li > div {
    display: none;
    background: #ffffff;
    position: absolute;
    z-index: 5;
    padding: 5px;
    border: 1px solid #000000;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    white-space: nowrap;
    min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
    background: #000000;
}
#menu > ul > li > div > ul > li > a {
    color: #FFFFFF;
Если хочется вашего.
1
0 / 0 / 0
Регистрация: 28.01.2010
Сообщений: 15
17.12.2013, 19:19  [ТС] 6
Спасибо большое! разобрался, остался один открытый вопрос для меня:

Как сделать закругленные углы при наведении?

поэксперементировал с кодом, но мало что получилось....
0
Изображения
 
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
17.12.2013, 20:27 7
#something: hover {border-radius: 50%} не работает?
если нет то как вариант сделать так: заливать фон блока синим цветом а при наведении в качестве фона ставить специально подготовленную картинку со кругленными углами и не париться по поводу кроссбраузерности бордер-радиуса
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.12.2013, 20:27

Как оставить главное меню на всех страницах сайта?
Здравствуйте. Подскажите, как можно сделать, чтобы на всех страницах сайта шапка (&quot;Контакты&quot;,...

Как сделать, чтобы главное меню сайта вытянулось в одну линию?
Не получается растянуть меню на странице сайта. Оно идет в две линии, а надо в одну......

Надо сделать общий код, но чтоб он работал только на главное меню
В общем у меня есть одни общие стили для меню. Стили активного меню. Блок отъезжает справа, в...

Как добавить выплывающее меню к уже готовому горизонтальному меню (не меняя дизайн горизонтального меню)?
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;...

Корректная верстка макета, где главное фоновое изображение больше чем wrapper
Привет ребят! Нуждаюсь в мудром наставлении. Зачастую min-width блока wrapper составляет 960 px, и...

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


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

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

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