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

Реализация меню

27.04.2014, 15:40. Показов 955. Ответов 5
Метки нет (Все метки)

День добрый форумчане.
Подскажите как реализовать подобное меню.
Реализация меню
0

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

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.04.2014, 15:40
Ответы с готовыми решениями:

реализация меню
Добрый день! Подскажите как реализовать подобное меню

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

Реализация меню
Доброго времени суток. Хотелось бы узнать, можно реализовать такое меню? Либо чистый CSS, либо с JS...

Реализация меню
Доброго времени суток! Пытаюсь реализовать: показывает страничку меню на которой расположена кнопка...

5
15 / 15 / 4
Регистрация: 21.04.2014
Сообщений: 179
27.04.2014, 17:13 2
А что с ним особенного? Если то, что при наведении на разделы меню цвет изображения меняется на оранжевый, то тут нужно использовать псевдокласс :hover.

HTML5
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="menu_box">
MAIN
</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#menu_box {
background-image: url('mail.png');
background-repeat: none;
width: 96px;
height: 96px;
text-align: center;
color: #FFF;
}
 
#menu_box:hover {
background-image: url('mail_hover.png');
background-repeat: none;
width: 96px;
height: 96px;
text-align: center;
color: #FFF;
}
Демонстрация.
0
1 / 1 / 0
Регистрация: 08.03.2014
Сообщений: 6
27.04.2014, 17:16  [ТС] 3
KVESTOR, интересует сама реализация- позиционирование блоков.
Делать меню через список lI или же через div или span/
Если через ли, то как сделать что бы иконки были сверзу а надписи снизу.
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
27.04.2014, 17:27 4
Лучший ответ Сообщение было отмечено Archi88 как решение

Решение

где то 2 месяц назад похоже сделал, вот так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<li>
    <img src="images/car_one.png" alt="car" />
    <p><a href="#">Минипогрузчики</a></p>
</li>
<li>
    <img src="images/car_two.png" alt="car" />
    <p><a href="#">Фронт. погрузчики</a></p>
</li>
<li>
    <img src="images/car_tree.png" alt="car" />
    <p><a href="#">Экс-ры погрузчики</a></p>
</li>
1
1 / 1 / 0
Регистрация: 08.03.2014
Сообщений: 6
27.04.2014, 19:07  [ТС] 5
isco_kg, KVESTOR, не подскажите как прикрутить hover в данную конструкцию ?
HTML5
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
<div class="menu">
                    <div id="list">
                        <ul>
                            <li>
                                <img src="img/main.png" alt="car" />
                                <p><a href="#">Main</a></p>
                            </li>
                            <li>
                                <img src="img/about.png" alt="car" />
                                <p><a href="#">About</a></p>
                            </li>
                            <li>
                                <img src="img/sevice.png" alt="car" />
                                <p><a href="#">Sevice</a></p>
                            </li>
                            <li>
                                <img src="img/photo.png" alt="car" />
                                <p><a href="#">Photo</a></p>
                            </li>
                            <li>
                                <img src="img/contact.png" alt="car" />
                                <p><a href="#">Contact</a></p>
                            </li>
                        </ul>
                    </div>
                </div>
CSS
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
*{
    margin: 0px;
    padding: 0px;
}
#column{
    width: 100%;
    height: 100%;
}
 
.home,.about,.service,.photo,.contact{
    width: 980px;
    height: 740px;
    margin: 0 auto;
}
 
.home{
    background:url(../img/home.jpg);
position: relative;
}
 
.center{
    position: absolute;
    top: 38%;
    margin-left: 35px;
    width: auto;
    height: auto;
}
.logo{
    position: absolute;
    display: inline-block;
    width: 320px;
    height: 160px;
    background:#9f9b87 url(../img/logo.png) no-repeat center;
    opacity: 0.9;
 
}
 
.menu{
    margin-left: 327px;
    position: absolute;
    display: inline-block;
    width: 580px;
    height: 160px;
    background:#3f3f3e ;
    opacity: 0.9;
 
}
 
#list{
    margin: 30px 45px;
}
#list ul {
    list-style: none; 
}
#list li {
    display: inline-block;
    padding: 20px;
    text-align: center;
    font-size: 20px;
}
0
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
28.04.2014, 13:29 6
CSS
1
#list li:hover{свойство}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.04.2014, 13:29

Реализация ховера в меню
Уважаемый форумчане, добрый вечер! Что-то я попал в небольшой ступор и не понимаю как реализовать...

Реализация меню через CSS
Друзья,очень прошу помощи)Переверстываю шапку своего сайта, хочу переделать меню,чтоб было оно...

Реализация меню с эффектами на CSS
Помогите пожалуйста с меню, ато у меня туго с этим... текстуры вот сделал вроде, а как реализовать...

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


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

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

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