Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
PaulVanDyk
0 / 0 / 1
Регистрация: 14.12.2011
Сообщений: 134
#1

неполадки с навигацией

29.04.2012, 16:45. Просмотров 543. Ответов 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
<nav>
    <ul>
        <li><a href="start.php">Главная<br /></a></li>
        <li><a href="content/data_game.php">Клуб<br />
            <small>Администрация</small><br />
            <small>История</small><br /></a></li>
        <li><a href="content/team.php">Команда</br>
            <small>Игроки</small><br />
            <small>Тренера</small><br />
            <small>Календари</small><br /></a></li>
        <li><a href="content/league.php">Молодёжная<br />
            <small>Игроки</small><br />
            <small>Тренера</small><br />
            <small>Календари</small></a></li>
        <li><a href="content/result.php">Мультимелия<br />
            <small>Фотография</small><br />
            <small>Видио</small></a></li>
        <li><a href="content/stadium.php">Турниры<br />
            <small>Игроки</small><br />
            <small>Тренера</small></a></li>
        <li><a href="content/stadium.php">Дата соревнований<br />
            <small>Игроки</small><br />
            <small>Тренера</small></a></li>
        <li><a href="content/trainer.php">Билеты<br /> </a></li>
    </ul>
</nav>
Добавлено через 20 минут
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
/*
CSS начнем с использования универсального селектора для сброса полей 
назначим свойство box-sizing: border-box всем элементам страницы.
это поможет нам просто устанавливать размеры элементов  в процентах, даже при использовании рамок.*/
 
* {
    padding:0;
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/* зададим набор свойств для родительского элемента
Наш контейнер будет растягиваться на все доступное пространство, но  останется место для формирования свободной зоны в дизайне.
Также установим контейнер по центру с помощью автоматического определения размеров полей.
Кроме того, установим стили для неупорядоченного списка, чтобы отказаться от использования меток.
*/
nav {
    width: 90%;
    margin: 50px auto; 
}
 
nav ul {
    list-style: none;
    overflow: hidden;/*ширина прокрутки*/
}
 
/*Все ссылки делаем блочными элементами, смещаем их влево, задаем ширину и небольшой отступ.
 Получаем достаточно большой прямоугольник  Ширина 12.5% получается как результат вычислений 100% / 8 (количество пунктов меню).
Затем определяем внешний вид. Устанавливаем фон и рамку.*/
nav li a {
    display: block;
    float: left;
    width: 11.1%;
    padding: 10px;/*отступ*/
    background: #444;
    border-right: 1px solid #fff;
    color: #fff;   
    font: 700 13px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
/*мелкий текст*/
nav small {
    color: #aaa;   
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
}
/*При наведении курсора мыши на пункт меню, то становится более черным. 
Для создания дополнительного эффекта используется трансформация.*/
nav li a {
    background: #444;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 700 13px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 12.5%;
 
    /*ТРАНСФОРМАЦИИ*/
    -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}
 
/*АКТИВНОЕ СОСТОЯНИЕ*/
nav li a:hover {
    background: #222;
}
/*
Каждый пункт имеет белую рамку, которая служит разделителем.
Значит последний пункт не нуждается в рамке. Воспользуемся специальным псевдо-классом.
*/
/*РАМКА ПОСЛЕДНЕГО ПУНКТА*/
nav li:last-child a {
    border: none;
}
 
/*Делаем меню адаптивным*/
/*Если начать уменьшать ширину экрана, то меню превратиться в ужасную конструкцию:*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
    nav li a {
        font: 700 10px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
    }
    nav small {
        font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
    }
}
 
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
    nav li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 700 11px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
    }
    nav li:last-child a, nav li:nth-child(4) a {
        border-right: none;
    }
 
    nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
        border-bottom: none;
    }
}
 
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    nav li a {
        width: 50%;
        font: 700 12px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    nav li:nth-child(even) a {
        border-right: none;
    }
    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    nav li a {
        font: 700 11px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
    }
}

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

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
29.04.2012, 16:45
Ответы с готовыми решениями:

Не получается с навигацией
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;...

проблема с навигацией
&lt;style&gt; html { background: url(bg.jpg) no-repeat center center fixed;...

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

проблема с навигацией
&lt;style&gt; html { background: url(bg.jpg) no-repeat center center fixed;...

Блок с навигацией по странице html 5
Как сделать такой блок с навигацией по странице (как у википедии) на html5?

3
SlavAz
ѪѦѢ
595 / 164 / 5
Регистрация: 19.08.2011
Сообщений: 666
Записей в блоге: 3
29.04.2012, 20:34 #2
где-то я это уже видел... Вообще совсем не правильная вёрстка для выпадающего меню, у вас все пункта в одной ссылке... Должно быть что-то типа:
html
HTML5
1
2
3
4
5
6
7
<nav>
  <ul>
      <li><a href="#">Клуб</a><br/>
          <a href="#">Авторизация</a><br/>
          <a href="#">История</a></li>
  </ul>
</nav>


css
CSS
1
2
3
4
5
6
7
ul li{
height:16px;
overflow:hidden;
}
ul li:hover{
height:48px;
}


понимаешь суть?
1
PaulVanDyk
0 / 0 / 1
Регистрация: 14.12.2011
Сообщений: 134
29.04.2012, 21:49  [ТС] #3
Лучше на данном примере,так понятнее будет.Хотя бы пара строк
0
SlavAz
ѪѦѢ
595 / 164 / 5
Регистрация: 19.08.2011
Сообщений: 666
Записей в блоге: 3
29.04.2012, 22:04 #4
у тебя в одной ссылке всё... т.е. нажатие на "Администрация" или "История" приведет в "Клуб"
HTML5
1
2
3
4
5
6
7
8
9
<nav>
   <ul>
        <li>
             <a href="content/data_game.php">Клуб</a><br/>
             <a href="content/data_game.php?action=admins"><small>Администрация</small></a><br/>
             <a href="content/data_game.php?action=history"><small>История</small></a>
        </li>
   </ul>
</nav>
В css нужно сделать так, чтобы по умолчанию height был равный одной строке и overflow:hidden, а при :hover становился авто. А вообще подход с <br/> какой-то кривоватый, в переводе он применяется не для дополнительных пунктов, а для пояснений к основному. Лучше вместо копипаста перевода Попова и бездумной правки посмотри "выпадающее меню css" в гугле. И разберись в технике.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
29.04.2012, 22:04

Свернуть блок с навигацией html5
Как сделать, чтобы блок с навигацией по странице сворачивался при нажатиии...

Небольшая кривизна с меню навигацией
Всем привет. Проблема у меня с lava lamp effect. Многие наверно слышали о таком...

Навигация по сайту с выплывающей под навигацией при нажатии ЛКМ
Помогите пожалуйста,уже давно ищу как сделать именно так как тут...


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

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

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