Diskuze: Menu s logem v půlkruhu
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Vykasli se na cizi slova, pokud nevis, jak si je mas vylozit 
Protoze mas menu na obou stranach, tak by je snad kazdemu jasne, ze nejaka
responzivita jde stranou, pokud to ma nejak vypadat. Pokud ne, tak hold, at se
chudak trapi sam V okamziku,
kdyz se ti to zalomi, sam uvidis jaka je to hloupost. A pro 4 polozky menu nema
vyznam neco takoveho podnikat.
Muzes pouzit float + display:inline. Musis nastavit vysku. A uvnitr si pak
budes muset text posunout shora asi pres position nebo margin.
[float [float position value1] [float position value2]]
[float [logo]]
[float [float position value3] [float position value4]]
Ja bych to ale neresil. A html strukturu bych pouzil tuto:
<ul>
<li><a href...>
<li><a href...>
</ul>Nebo muzes pouzit bootstrap, jako ja v pokusu tady:
https://mlich.zam.slu.cz/…tuality7.htm
Ale tam vidis, ze se to sice v malem okne zalomi natrikrat, ale vicemene je to
zbytecne. Menu s kratkymi 4 polozkami i s logem by se veslo na 1 radek. Ja tam
mam delsi nazvy.
Jiří Nováček:16.7.2020 9:12
Díky, za odpověď.Nakonec jsem si s tím poradil přes flexbox a absolutní
hodnotu(Vím, že to je hrozná prasečina ).A pro mobil jsem to nahradil
hamburger menu.
HTML5
<body>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<nav>
<ul>
<li><a href="#" class="menu-link1"><i class="fas fa-home"></i> Domů</a></li>
<li><a href="#" class="menu-link2"><i class="fas fa-car"></i> Automobily</a></li>
<li><a href="#" class="menu-link3"><i class="fas fa-file-signature"></i> Podmínky</a></li>
<li><a href="#" class="menu-link4"><i class="fas fa-mobile"></i> Kontakt</a></li>
</ul>
</nav>
<div class="menu-container">
<div class="kolecko">
</div>
<img src="css/img/logo.png" class="logo">
</div>
<div class="text">
<h1>Testovací text</h1>
</div>
<script src="app.js"></script>
</body>CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Cabin', sans-serif;
}
body {
background: url(img/background.jpg);
}
a {
text-decoration: none;
color: rgb(121, 0, 0);
}
/* Menu */
.kolecko{
width: 200px;
height: 100px;
background-color: white;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid rgb(121, 0, 0);
border-top: 0;
z-index: 3;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 40px;
}
.logo {
width: 160px;
z-index: 4;
position: absolute;
}
.menu-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
nav {
height: 90px;
background-color: white;
border-bottom: 10px solid rgb(121, 0, 0);
z-index:-1;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
nav ul {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
margin: 0 100px;
}
nav ul li{
list-style-type: none;
padding: 0 20px;
text-transform: uppercase;
color: rgb(121, 0, 0);
font-size: 1.5rem;
}
nav ul li a:hover {
color: #000;
}
nav ul li:nth-child(2) {
margin-right: 14%;
}
nav ul li:nth-child(3) {
margin-left: 14%;
}
.toggle {
width: 100%;
padding: 10px 20px;
background: rgb(121, 0, 0);
text-align: right;
box-sizing: border-box;
color: #fff;
font-size: 25px;
display: none;
}
.text {
margin: 20%;
color: #fff;
}
/* Media Querry */
@media (max-width: 1440px) {
nav ul li{
font-size: 1.3rem;
}
nav ul {
margin: 0 50px;
}
}
@media (max-width: 1024px) {
nav ul {
margin: 0 40px;
}
}+5 Zkušeností
Zobrazeno 4 zpráv z 4.