0 / 0 / 0
Регистрация: 08.10.2016
Сообщений: 20
1

Меню по ширине строки

22.12.2016, 20:36. Показов 1937. Ответов 1
Метки нет (Все метки)

Как сделать так, чтобы меню разместилось по всей ширине строки
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
61
62
63
64
65
66
67
68
69
html,body{
height:100%;
margin:0;
padding:0;
background:#d33;
}
#wrapper{
display: table;
height:100%;
}
#header{
height:50px;
background: rgb(0,255,102);
}
 
#footer{
background:#769;
display: table-row;
height:20%;
}
#wrapper, #footer{
width:100%;
}
ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0 auto; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  background:#819A32; /*добавляем фон всему меню*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#819A32; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
display:block;
  border-right: 1px solid #677B27; /*добавляем бордюр справа*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
 
}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
float:left;/*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
}
     
    /*Стили для скрытого выпадающего меню*/
    li > ul {
        position:absolute;
        display:none;   
    }
     
    /*Делаем скрытую часть видимой*/
    li:hover > ul {
        display:block; 
        width:300px;  /*Задаем ширину выпадающего меню*/      
    }
   li:hover > ul > li {
        float:none; /*Убираем горизонтальное позиционирование*/
    }
#content{
background:#d33;
}
Миниатюры
Меню по ширине строки  
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.12.2016, 20:36
Ответы с готовыми решениями:

Выровнять меню по ширине
Не выравнивается нижнее меню (как проехать в цирк, расписание цирка...) по ширине белого блока,...

Выровнять меню по ширине
Привет. Меню прилегает больше к левому краю. Как по ширине задать ? ...

Выровнять меню по ширине
Ребят, как выровнить меню ? #branding #site-logo img { margin: 0 } /* =Menu...

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

1
Эксперт HTML/CSS
2958 / 2577 / 1067
Регистрация: 15.12.2012
Сообщений: 9,733
Записей в блоге: 11
22.12.2016, 22:46 2
Лучший ответ Сообщение было отмечено neznayu как решение

Решение

neznayu, наугад:
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
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,body{
        height:100%;
        margin:0;
        padding:0;
        background:#d33;
    }
    #wrapper{
        display: table;
        height:100%;
    }
    #header{
        height:50px;
        background: rgb(0,255,102);
    }
     
    #footer{
        background:#769;
        display: table-row;
        height:20%;
    }
    #wrapper, #footer{
        width:100%;
    }
    ul {
        display:table;
        width: 100%;
        list-style: none; /*убираем маркеры списка*/
        margin: 0 auto; /*убираем отступы*/
        padding-left: 0; /*убираем отступы*/
        background:#819A32; /*добавляем фон всему меню*/
        height: 50px; /*задаем высоту*/
    }
    a {
        text-decoration: none; /*убираем подчеркивание текста ссылок*/
        background:#819A32; /*добавляем фон к пункту меню*/
        color:#fff; /*меняем цвет ссылок*/
        padding:0px 15px; /*добавляем отступ*/
        font-family: arial; /*меняем шрифт*/
        line-height:50px; /*ровняем меню по вертикали*/
        display:block;
        border-right: 1px solid #677B27; /*добавляем бордюр справа*/
        -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
        -o-transition: all 0.3s 0.01s ease;
        -webkit-transition: all 0.3s 0.01s ease;
        text-align: center;
     
    }
    a:hover {
        background:#D43737;/*добавляем эффект при наведении*/
    }
    ul.menu>li {
        display:table-cell; /*Размещаем список горизонтально для реализации меню*/
        width: 20%;
        position:relative; /*задаем позицию для позиционирования*/
    }
    
    ul.menu>li>.submenu{width:100%}
         
        /*Стили для скрытого выпадающего меню*/
        li > ul {
            position:absolute;
            display:none;   
        }
         
        /*Делаем скрытую часть видимой*/
        li:hover > ul {
            display:block; 
            width:300px;  /*Задаем ширину выпадающего меню*/      
        }
       li:hover > ul > li {
            float:none; /*Убираем горизонтальное позиционирование*/
        }
    #content{
    background:#d33;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <ul class="menu">
                <li><a href="">Lorem ipsum</a></li>
                <li><a href="">Lorem ipsum</a></li>
                <li>
                    <a href="">Lorem ipsum</a>
                    <ul class="submenu">
                        <li><a href="">Lorem ipsum</a></li>
                        <li><a href="">Lorem ipsum</a></li>
                    </ul>
                </li>
                <li><a href="">Lorem ipsum</a></li>
                <li><a href="">Lorem ipsum</a></li>
            </ul>
        </div>
    </div>
    <div id="footer"></div>
</body>
</html>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.12.2016, 22:46
Помогаю со студенческими работами здесь

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

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

Меню по ширине экрана на сайте
Здравствуйте! Помогите пожалуйста с основным меню на сайте. Хочу чтобы оно было по всей ширине...

Автоопределение меню - входит ли 3 уровень по ширине
Доброго времени суток. Столкнулся с такой проблемой. Есть горизонтальное меню - при наведение...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru