Я занимаюсь разработкой небольшого сайта с выпадающими меню, используя только HTML / CSS. Само по себе это прекрасно работает. Раньше я использовал TD, но, эй, правила DIVS, так что теперь используйте DIV.
Я использую топ-меню. С левой стороны, есть несколько пунктов меню, и то же самое касается правой стороны меню. Пока все хорошо. Так как есть только два элемента div, один с плавающей левой и другой с плавающей правой, и оба имеют одинаковый CSS, применяемый внутри div-контейнера с шириной 100%, это выглядит как одна большая строка меню.
Проблема возникает, когда я хочу добавить маленький логотип точно в середине экрана, в той же строке меню. Поскольку левый и правый список параметров меню имеют разную ширину (правый список элементов меню несколько короче), логотип в середине перекошен вправо.
Что еще хуже, список пунктов меню является динамическим, в зависимости от того, на какой странице вы находитесь и вошли ли вы в систему.
То, чего я хочу достичь, это:
- Содержит 3 части в строке меню: правое меню, средний логотип, левое меню
- Средний логотип всегда должен быть точно в центре экрана
- При изменении размера окна браузера размеры левой и правой частей автоматически изменяются по размеру экрана
- средний логотип фиксированной ширины
- При изменении размера, левое и правое меню могут изменять размер только до ширины, необходимой для самого длинного из правого или правого списка опций меню
- Конечно, без упаковки!
Я пытался, но с треском провалился, главным образом потому, что мои знания недостаточны. Я предпочитаю использовать только HTML / CSS, а не JS / jquery
Я попытался создать изображение backgorund в css контейнера div, но затем, при изменении размера, пункты меню в конечном итоге перешли на средний журнал.
Это CSS для выпадающих меню (откуда-то взял его из интернета, а не из моего кода)
.navbarl {
overflow: hidden;
background-color: #333;
}
.navbarl a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-weight: normal;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: white;
padding: 8px 10px;
background-color: #333;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #FFCC00;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 8px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
HTML обычно выглядит примерно так:
<div class="navbarl">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Конечно, я изменил это для своего сайта и добавил второй блок для правого меню в строке меню.
Это то, что у меня сейчас есть для полной строки меню. Я знаю, что таблицы плохо подходят для форматирования, но я пробовал много разных вещей, и это копия моей последней попытки. Как я уже сказал, я все еще новичок в div и учусь избавляться от них: -)
<table class=menu>
<tr>
<td class="menu_left">
<div class="navbarl">
<a href="/index.php">Home</a>
<a href="/somesubfolder/index.php">Menu option 2 wih a long name</a>
<div class="dropdown">
<button class="dropbtn">Cursus▼</button>
<div class="dropdown-content">
<a href="/somesubfolder/a.php">Be</a>
<a href="/somesubfolder/b.php">One</a>
</div>[![enter image description here][1]][1]
</div>
<a href="/misc/login.php">Login</a>
</div>
</td>
<td class="menu_middle">
<a href="http://www.budgetbytes.nl"><img class="menu_sponsor" src="/images/sponsor.png" alt=""/></a>
</td>
<td class="menu_right">
<div class="navbarl">
<a href="/misc/nieuws.php">Nieuws</a>
</div>
</td>
</tr>
</table>
Это пример (логотип, который я сделал невидимым, здесь нет необходимости быть коммерческим, это логотип наших спонсоров). Вы можете увидеть его перекос
