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

Создание выпадающего подпункта в меню

21.12.2019, 19:28. Показов 795. Ответов 2

Добрый день. Не получается реализовать выпадающий подпункт в меню. Памагите =D Туторы на ютубе и гугле не помогают, а только портят.
Кликните здесь для просмотра всего текста

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
64
65
66
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <title>Главная</title>
</head>
   
   <body>
        
         <div class="logo">
             <a href="index.html"><img class="graficlogo" src="assets/images/3d-logo.jpg" alt="логотип" id="anc"></a>
         </div>
         
       <header>
                  <nav>
                      <ul>
                          <li><a href="#">Главная</a></li>
                          <li><a href="history.html">Введение в тему</a>
                              <ul>
                                  <li><a href="history.html">Компьютерная графика в наши дни</a>
                                  <li><a href="history_2.html">История развития</a>
                                  <li><a href="history_3.html">от "Альбома" к мультипликации"</a>
                              </ul>
                          </li>
                          <li><a href="technology.html">Технологии 3D графики</a>
                          <li><a href="#">Карта сайта</a></li>
                          <li><a href="#">Глоссарий</a>
                          <li><a href="frame_my.html">Об авторе</a></li>
                      </ul>
                  </nav>
       </header>
           
           <div class="content">
                <h2>Технологии реализации 3D графики при разработке компьютерных игр - обзор.</h2>
          <p> В своем обзоре «Технологии реализации 3D графики при разработке компьютерных игр», я постараюсь объяснить на простых примерах из игровой индустрии, к каким решениям приходят разработчики, чтобы внедрить в свои проекты передовые технологии реализации трехмерной графики. Что представляют из себя данные технологии и каких усилий стоит внедрение самых передовых технологий 3D графики в свои проекты разработчикам.
          </p>
          
          <img src="assets/images/page_1.jpg" alt="картинка_1" class="page_1">
          
          <p>
              Реализация технологий, создание игровой графики,  художественное оформление игры – один из важнейших моментов процесса разработки. На это уходит львиная доля бюджета игры, а сама графика в значительной степени определяет то, что называется «атмосферой игры». Кроме того, хорошая графика – это еще и одно из условий успешных продаж: вспомните броскую рекламу в журналах, построенную на реальной внутриигровой графике, скриншоты в Интернете и на коробках с играми.
          </p>
          
          <p>
              Понятие «игровая графика» и ее технологии включает в себя так называемый концепт-арт, то есть эскизы и наброски, во многом определяющие то, как игра будет выглядеть, и собственно компьютерную – внутриигровую – графику. Современный мир уже не может обходиться без компьютерной графики. Она движется и развивается очень быстро и стремительно. И возможно в скором будущем мы станем свидетелями того, как жизнь по ту сторону экрана, которая стремительно развивается благодаря современным технология, достигнет того уровня, что отличить ее от реальной жизни, станет невозможно. 
          </p>
           </div>
           
           <footer>
                   <h3>О сайте</h3>
                   <p>
                       Сайт создавался как справочный материал, по заказу Федерального Государственного Бюджетного Образовательного Учреждения Высшего Образования <a href="http://www.пупкин.edu/">«пупкинский национальный исследовательский технический университет» </a> для обзора технологий реализации 3d графики при разработке компьютерных игр.
                   </p>
                              
                   <div class="copyright">
                         &copy; 2019г. Пупкин Владислав Викторович <a href="пупкин@gmail.com">пупкин@gmail.com</a>
                   </div>
           </footer>
           
            <div class="ancor">
                <a href="#anc"><img src="assets/images/ancor.png" alt="Якорь" width="70" height="70"></a>
            </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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
body{ background-color: #666666;}
 
img {
    padding: 8px;
    display:block;
    margin:auto;
}
 
.avatar {
    float: right;
    margin-right: 70px;
}
 
.ancor {
 position: fixed;
 z-index: 9999;
 bottom: 0%;
 right: 0%;
 opacity: .6;
 padding: 15px;
 margin: 5px 25px 125px 5px;
}
 
.ancor:hover {
    opacity: 1;
}
 
.page_all{
    max-width: 100%;
    display:block;
    margin:auto;
}
 
.content {
    width:70%;
    margin:0 auto;
    padding: 28px;
    background: #ffffff;
    border-bottom: solid 1px #ffffff;
    box-shadow: 0 0 10px;
    box-sizing: border-box;
}
 
a {
    color: black;
    text-decoration: underline;
}
 
a:hover {
    color: blue;
    text-decoration: none;
}
 
h2 {
    font-size: 1.8em; 
}
 
p {
    margin-bottom: 1.75em;
    text-indent: 3em;
    font-size: 1.3em; 
}
 
footer {
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 25px;
    text-align: center;
    color: #d3d3d3;
}
 
footer a{
    color: #eee;
    text-decoration: none;
}
 
footer a:hover{
    color: white;
    text-decoration: underline;
}
 
 
nav{
    font-size: 1.2em;
    height: 77px;
    background-color: #373737;
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
}
 
 
nav ul {
    display: flex;
    list-style: none;
    padding-left: 0;
    width: 100%;
    align-items: center;
}
 
nav li {
    display: flex; 
    flex: 1 1 20%;
}
 
nav a {
    text-align: center;
    display: block;
    box-sizing: border-box;
    color: white;
    height: 77px;
    width: 100%;
    padding-top: 25px;
    text-decoration: none;
    border-radius: 4px;
    border-right: 1px solid #000000;
    -moz-transition: all 0.3s 0.01s ease;
    -o-transition: all 0.3s 0.01s ease;
    -webkit-transition: all 0.3s 0.01s ease;
}
 
nav a:hover {
    color: white;
    background: #504949;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.12.2019, 19:28
Ответы с готовыми решениями:

Создание выпадающего меню
Как из этого меню сделать выпадающее вниз меню с подпунктами? #menu {clear: both;/*Отменяет...

Создание выпадающего меню CSS
Добрый день. У меня никак не получается оформить выпадающее меню с помощью CSS. Подскажите, что...

Изменить горизонтальное меню - сделать автозакрытие выпадающего меню после отвода курсора
Вообщем что имеем: http://test.aowserv.ru имеется горизонтальное меню, при наведении на кнопку...

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

2
-40 / 22 / 10
Регистрация: 15.11.2018
Сообщений: 158
23.12.2019, 04:21 2
сделал код который сделает меню выпадающим
в HTML5 сначала стереть всё между
<li><a href="#">Главная</a></li> и <li><a href="technology.html">Технологии 3D графики</a>
вставить код вот этот

<div id="conteiner">
<nav id="menu1">
<ul>
<li><a href="#m3">Введение в тему</a>
<ul>
<li><a href="#m3_1">Компьютерная графика в наши дни</a></li>
<li><a href="#m3_2">История развития</a></li>
<li><a href="#m3_3">от "Альбома" к мультипликации</a></li>
</ul>
</li>
</nav><!--menu1-->
</div><!--conteiner-->

дальше вставить код в css вниз после всего если вверх не работает


#conteiner{
width:200px;
padding-top:30px;
}
#menu1 ul{
position:relative;
display:block;
margin:0px;
background:#000000;
}
#menu1 >
}
#menu1 ul li{
position:relative;
display:block;
float:left;
width:0;
height:23;
}
#menu1 ul li a{
display:block;
padding:9px 25px 70px 35px;
font-size:14px;
font-family:Arial, sans-serif;
color:#ffffef;
line-height:1.3em;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
height:26px;
box-sizing:border-box;
}
#menu1 ul li > a:hover, #menu1 ul li:hover > a{
background:#EBBD5B;
color:#2B45E0;
}
#menu1 ul li ul{
position:absolute;
top:46px;
left:0px;
display:none;
width:200px;
background:#000000;
}
#menu1 ul li:hover ul{display:block;}
#menu1 ul li ul li{
float:none;
width:100%;
1
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
24.12.2019, 12:37 3
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
64
65
66
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <title>Главная</title>
</head>
   
   <body>
        
         <div class="logo">
             <a href="index.html"><img class="graficlogo" src="assets/images/3d-logo.jpg" alt="логотип" id="anc"></a>
         </div>
         
       <header>
                  <nav>
                      <ul>
                          <li><a href="#">Главная</a></li>
                          <li class="drop"><a href="history.html">Введение в тему</a>
                              <ul class="dropdown">
                                  <li><a href="history.html">Компьютерная графика в наши дни</a>
                                  <li><a href="history_2.html">История развития</a>
                                  <li><a href="history_3.html">от "Альбома" к мультипликации"</a>
                              </ul>
                          </li>
                          <li><a href="technology.html">Технологии 3D графики</a>
                          <li><a href="#">Карта сайта</a></li>
                          <li><a href="#">Глоссарий</a>
                          <li><a href="frame_my.html">Об авторе</a></li>
                      </ul>
                  </nav>
       </header>
           
           <div class="content">
                <h2>Технологии реализации 3D графики при разработке компьютерных игр - обзор.</h2>
          <p> В своем обзоре «Технологии реализации 3D графики при разработке компьютерных игр», я постараюсь объяснить на простых примерах из игровой индустрии, к каким решениям приходят разработчики, чтобы внедрить в свои проекты передовые технологии реализации трехмерной графики. Что представляют из себя данные технологии и каких усилий стоит внедрение самых передовых технологий 3D графики в свои проекты разработчикам.
          </p>
          
          <img src="assets/images/page_1.jpg" alt="картинка_1" class="page_1">
          
          <p>
              Реализация технологий, создание игровой графики,  художественное оформление игры – один из важнейших моментов процесса разработки. На это уходит львиная доля бюджета игры, а сама графика в значительной степени определяет то, что называется «атмосферой игры». Кроме того, хорошая графика – это еще и одно из условий успешных продаж: вспомните броскую рекламу в журналах, построенную на реальной внутриигровой графике, скриншоты в Интернете и на коробках с играми.
          </p>
          
          <p>
              Понятие «игровая графика» и ее технологии включает в себя так называемый концепт-арт, то есть эскизы и наброски, во многом определяющие то, как игра будет выглядеть, и собственно компьютерную – внутриигровую – графику. Современный мир уже не может обходиться без компьютерной графики. Она движется и развивается очень быстро и стремительно. И возможно в скором будущем мы станем свидетелями того, как жизнь по ту сторону экрана, которая стремительно развивается благодаря современным технология, достигнет того уровня, что отличить ее от реальной жизни, станет невозможно. 
          </p>
           </div>
           
           <footer>
                   <h3>О сайте</h3>
                   <p>
                       Сайт создавался как справочный материал, по заказу Федерального Государственного Бюджетного Образовательного Учреждения Высшего Образования <a href="http://www.пупкин.edu/">«пупкинский национальный исследовательский технический университет» </a> для обзора технологий реализации 3d графики при разработке компьютерных игр.
                   </p>
                              
                   <div class="copyright">
                         &copy; 2019г. Пупкин Владислав Викторович <a href="пупкин@gmail.com">пупкин@gmail.com</a>
                   </div>
           </footer>
           
            <div class="ancor">
                <a href="#anc"><img src="assets/images/ancor.png" alt="Якорь" width="70" height="70"></a>
            </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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
body{ background-color: #666666;}
 
img {
    padding: 8px;
    display:block;
    margin:auto;
}
 
.avatar {
    float: right;
    margin-right: 70px;
}
 
.ancor {
 position: fixed;
 z-index: 9999;
 bottom: 0%;
 right: 0%;
 opacity: .6;
 padding: 15px;
 margin: 5px 25px 125px 5px;
}
 
.ancor:hover {
    opacity: 1;
}
 
.page_all{
    max-width: 100%;
    display:block;
    margin:auto;
}
 
.content {
    width:70%;
    margin:0 auto;
    padding: 28px;
    background: #ffffff;
    border-bottom: solid 1px #ffffff;
    box-shadow: 0 0 10px;
    box-sizing: border-box;
}
 
a {
    color: black;
    text-decoration: underline;
}
 
a:hover {
    color: blue;
    text-decoration: none;
}
 
h2 {
    font-size: 1.8em; 
}
 
p {
    margin-bottom: 1.75em;
    text-indent: 3em;
    font-size: 1.3em; 
}
 
footer {
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 25px;
    text-align: center;
    color: #d3d3d3;
}
 
footer a{
    color: #eee;
    text-decoration: none;
}
 
footer a:hover{
    color: white;
    text-decoration: underline;
}
 
 
nav{
    font-size: 1.2em;
    height: 77px;
    background-color: #373737;
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
}
 
 
nav ul {
    display: flex;
    list-style: none;
    padding-left: 0;
    width: 100%;
    align-items: center;
}
 
nav li {
    display: flex; 
    flex: 1 1 20%;
}
 
nav a {
    text-align: center;
    display: block;
    box-sizing: border-box;
    color: white;
    height: 77px;
    width: 100%;
    padding-top: 25px;
    text-decoration: none;
    border-radius: 4px;
    border-right: 1px solid #000000;
    -moz-transition: all 0.3s 0.01s ease;
    -o-transition: all 0.3s 0.01s ease;
    -webkit-transition: all 0.3s 0.01s ease;
}
 
nav a:hover {
    color: white;
    background: #504949;
}
 
 
nav li.drop {
    position: relative;
}
 
nav ul.dropdown {
    visibility: hidden;
    position: absolute;
    top: 77px;
    display: flex;
    flex-direction: column;
    background-color: #373737;
    border-radius: 0;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
}
 
nav ul.dropdown li {
    width: 100%;
    border-bottom: 1px solid black;
}
 
nav ul.dropdown li a {
    border-right: none;
}
 
nav li.drop:hover > ul.dropdown {
    visibility: visible;
}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.12.2019, 12:37

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

Магия выпадающего меню
Создал горизонтальное меню, при наведении курсора мыши на его пункты выпадает вертикальное меню,...

Фон выпадающего меню
Должно быть Сделал вот Собственно вопрос: как сделать, чтобы background был 1 для всего...

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

Шаблон выпадающего меню
Здравствуйте. вопрос такой. имеются в коде html ссылки на шаблон css выпадающего меню &lt;link...


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

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

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