Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Swiftu. Zároveň využij výhodnou slevovou akci až 30 % zdarma při nákupu e-learningu - více informací.
discount 30 + hiring
Avatar
Jiří Nováček:15.7.2020 16:28

Ahoj
potřeboval, bych poradit, jak napsat v css menu (viz.návrh). Jedná se o menu s půlkruhem uprostřed obsahujícím logo. A na každé straně navigace, by měli být 2 položky menu.

Zkusil jsem: Zkoušel jsem to různě pozicovat a používat flexboxy. Ale jiné rešení, než to udělat pomocí absolutních pozic jsem bohužel nanašel.

Chci docílit: Chtěl bych najít způsob, jak napsat, něco podobného, jako na obrázku, co nejvíc respozivně.A pokud je to možné bez absolutního pozicování.

Všem předem děkuji za jejich čas!

Odpovědět
15.7.2020 16:28
Nic není nemožné!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:16.7.2020 9:01

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.

 
Nahoru Odpovědět
16.7.2020 9:01
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Peter Mlich
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;
  }

}
Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
16.7.2020 9:12
Nic není nemožné!
Avatar
Odpovídá na Jiří Nováček
Jiří Nováček:16.7.2020 9:21

Dopadlo to nějak takhle.

Nahoru Odpovědět
16.7.2020 9:21
Nic není nemožné!
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.