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

Как сделать такое выпадающее меню?

06.05.2015, 10:28. Просмотров 598. Ответов 1
Метки нет (Все метки)


Добрый день.Я приактикующий начинающий верстальщик , сейчас для практики делаю такой шаблон

Как сделать такое выпадающее меню?


Подскажите плиз кто знает , как сделать такое выпадающее меню как в макете , у меня что то оно не скрывается , хотя пробовал ставить visible hidden

добавлю код который я уже написал:

html
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
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
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container-fluid" id="topmenulogo">
<div class="col-sm-4" id="logo"><a href=""><img src="https://www.cyberforum.ru/images/logo.png"></a></div>
<div class="col-sm-8" id="navigation">
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">cervices</a></li>
<li><a href="">portfolio</a>
<ul class="inside">
<li><a href="">cervices</a></li>
<li><a href="">cervices</a></li>
<li><a href="">cervices</a></li>
</ul>
</li>
<li><a href="">blog</a></li>
<li><a href="">featured</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="col-sm-12">
caroucel
</div>
</div>
<div class="container-fluid">
breadcrumbs
</div>
</header>
<div  class="col-sm-8">
content
</div>
<div  class="col-sm-4">
right
</div>
<footer>
<div  class="container-fluid">
<div  class="col-sm-5">
modus versus
</div>
<div  class="col-sm-3">
footer menu
</div>
<div  class="col-sm-4">
blog
</div>
</div>
</footer>
</body>
</html>
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
@charset "utf-8";
#topmenulogo{
height:80px;
background-image:url(../images/headerbackground.png);
}
#logo img{
padding-top:22px;
margin-left:20%;
}
nav{
float:right;
padding-top:27px;
width:100%;
}
nav ul li{
float:left;
list-style-type:none;
margin-left:2%;
height:30px;
padding:0 2%;
}
nav ul li:hover{
background-color:#E5655D;
border-bottom:4px solid #E2534B;
border-radius:4px;
}
nav ul li a{
color:#fff;
height:30px;
display:block;
text-transform:uppercase;
font-weight:600;
font-size:90%;
margin-top:6px;
}
nav ul li a:hover{
color:#fff;
text-decoration:none;
}
.inside{
 position: absolute;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.05.2015, 10:28
Ответы с готовыми решениями:

Как сделать такое выпадающее меню?
Вот меню для магазина, как сделать такую выпадающую вкладку?? Скрипты тут нужны или можно на CSS,...

Как реализовать такое выпадающее меню
Хочу реализовать данное меню

Как сделать выпадающее меню
Ребят а как сделать выпадающие меню, для категории &quot;Достопримечательности&quot; &lt;!DOCTYPE HTML&gt;...

Как сделать выпадающее меню?
Помогите пожалуйста новичку, сделать выпадающее меню &lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt; &lt;ul&gt;...

1
0 / 0 / 0
Регистрация: 04.05.2015
Сообщений: 2
06.05.2015, 10:30  [ТС] 2
del
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.05.2015, 10:30

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

Как сделать выпадающее меню
Можно ли сделать выпадающее меню как на скрине без JS ? Здесь при выборе элемента, как в...

DLE 9.2 как сделать выпадающее меню в шаблоне
Как сделать чтобы при наведении мышкой на верхнею категорию, выпадало меню? Плиз покапайтесь в...

Как сделать что бы выпадающее меню не моргало при свертывание?
Если делать через меню через opacity и visibility при свертывании оно моргает если оставить...

Как сделать такое меню
Такое без яваскрипта осуществимо? Если кому не трудно набросайте шаблон пожайлуста такой менюшки.

Как сделать такое меню ?
Приветствую всех. Нужно сделать меню аккордеон . Как его сделать ? Можно ли написать его на css3 ?...

Как сделать такое же меню?
народ как сделать такое же меню как на вот тут...


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

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

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