Menu w CSS i HTML

Question

Witam mam problem z tym aby umiescic ikone z ludzikiem na rowni z napisami autor, kontynety itp. Chcialbym aby napisy zaloguj  sie i rejestracja byly nizej. Chce zrobic wysuwane menu (to taka dodatkowa informacja co chce uzyskac potem).

 <center><div class="menu">
                    <a href="index.html"><p>Strona główna</p></a>
                    <a href="#"><p>Wsparcie</p></a>
                    <a href="#kontynenty"><p>Kontynenty</p></a>
                    <a href="https://wdprojects.opx.pl" target="_blank"><p>Autor</p></a>
                    <a href="#">
                      <ul>
                      <i class="fa-solid fa-user"></i>
                      <li><h>Zaloguj się</h></li>
                      <li><h>Rejestracja</h></li>
                      </ul>
                    </a>
                  </div></center>

.menu{
    margin-top: 17px;
    justify-content: center;
    align-items: center;
    width: 60%;
}
.menu p{
    display: inline-block;
    margin: 20px;
    padding: 15px;
    text-decoration: none;
    font-weight:500;
    color: #1E90FF;
}
.menu a{
    text-decoration: none;
    font-family: 'K2D', sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    color: #fff;
}
.menu i{
    background: #1E90FF;
    color: #fff;
    padding: 5px;
    border-radius: 7px;
}
.menu h{
    color: #222;
}
.menu p:hover{
    color: #0b5aa8;
}

 

Comments

Skoro taki jest twój plan, to dlaczego ikone user masz na liscie 
 

 <a href="#">
                     <ul>
                     <i class="fa-solid fa-user"></i>
                     <li><h>Zaloguj się</h></li>
                     <li><h>Rejestracja</h></li>
                     </ul>
  </a>

i to umieszczonej w linku?

Answer 1

Hej!

Też jestem początkujący, więc moja rada może być nieprawidłowa, natomiast ja zastosowałbym to rozwiązanie, i być może się przyda :)  Umieściłem kod oczywiście właściwości  z wymiarami i stylizacja zależna jest od Ciebie. A co do rozwijanego menu, stwórz nadrzędny div umieść w nim div class="menu" wraz z stworzonym siblingiem divem zawierającym rozwijaną zawartość, na siblingu zastosuj atrybut css visibility: hidden;, który w js będziesz edytować używając na visiblity: visible; W js pobawisz się addEventListenerem, targetem, eventami. 

 

<center>
	<div class="menu">
		<div class="inMenu">
					   <a href="index.html"><p>Strona główna</p></a>
		</div>
		<div class="inMenu">
					   <a href="#"><p>Wsparcie</p></a>
		</div>
		<div class="inMenu">
					   <a href="#kontynenty"><p>Kontynenty</p></a>
		</div>
		<div class="inMenu">
					   <a href="https://wdprojects.opx.pl" target="_blank"><p>Autor</p></a>
		</div>
	</div>
	<div class="menu">
		<div class="inMenu">
			<p><i class="fa-solid fa-user"></i></p>
		</div>
		<div class="inMenu"> 
			<p>Zaloguj się</p>
		</div>
		<div class="inMenu"> 
			<p>Rejestracja</p>
		</div>
	</div>
</center>

css
.inMenu
{
	display: inline-block;
}

 

Comments

na siblingu zastosuj atrybut css visibility: hidden;, który w js będziesz edytować używając na visiblity: visible; W js pobawisz się addEventListenerem, targetem, eventami. 

Można do tego użyć tylko css-a bez js-a: Dropdown Menus with CSS  

---

Czy w przypadku samego użycia css można zastosować reakcję na kliknięcie oprócz reakcji na najechanie kursorem?

---

Można zrobić reakcję na aktywację (kliknięcie, ale bez zapamiętania stanu) za pomocą pseudoklasy :active. Żeby stan kliknięcia został zapamiętany, można użyć checkboxa w HTML.

Answer 2

Może zrób jako listę całe menu

przykład

<center>
  <div class="menu">
    <ul>
      <li><a href="index.html"><p>Strona główna</p></a></li>
      <li><a href="#"><p>Wsparcie</p></a></li>
      <li><a href="#kontynenty"><p>Kontynenty</p></a></li>
      <li><a href="https://wdprojects.opx.pl" target="_blank"><p>Autor</p></a></li>
      <li><i class="fa-solid fa-user"></i></li>
      <li><a href="#"><p><span>Zaloguj się</span></p></a></li>
      <li><a href="#"><p><span>Rejestracja</span></p></a></li>
    </ul>
  </div>                   
</center>

.menu{
  margin-top: 1em;
  width: 80%;
}
.menu ul{
  list-style-type: none;  
}
.menu ul li{
  display: inline-block; 
}
.menu p{
  display: inline-block;
  margin: 1em;
  font-weight:500;
  color: #1E90FF;
}
.menu a{
  text-decoration: none;
  font-family: 'K2D', sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  color: #fff;
}
.menu i{
  background: #1E90FF;
  color: #fff;
  padding: 5px;
  border-radius: 7px;
}
.menu a p span{
  color: #222;
}
.menu p:hover{
  color: #0b5aa8;
}