Dropdown menù

psikolele

Nuovo Utente
14 Set 2021
2
0
1
Buongiorno a tutti, premetto che sono un novello nel mondo del web development per cui chiedo scusa dell'eventuale banalità della domanda. Non riesco a risolvere il problema che vedete nel video.

Nel dropdown menù che vedete (da cui ho preso spunto da un codice esistente) mi da questo errore "visivo", nel momento in cui vado in hover su un sottomenù il menù principale scatta verso l'alto

Ora vorrei che il sottomenu andasse in OFFSET magari nella sezione sottostante oppure in alternativa che il menù andasse verso l'alto ma in maniera dolce, magari attraverso una transition. Di seguito il codice.

Grazie mille per chi sarà disposto ad aiutarmi.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" charset="utf-8" type="text/javascript"></script>
    <!-- Ionicos script -->
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>   
    <!-- end Ionicons script -->
</head>
<body>

    
<ul class="main__menu">
    <li class="list-item">
      <a href="#" class="home item--js">
          <ion-icon size="large" name="home-outline"></ion-icon>
        <span>Home</span>     
      </a>
    </li>
    <li class="list-item">
      <a href="#" class="about item--js">
        <ion-icon size="large" name="construct-outline"></ion-icon>
        <span>Chi siamo</span>
        <i class="ion ion-ios-contact-outline"></i>
      </a>
    </li>

CSS:
/*page menu_1*/
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,[email protected],100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/*Colors*/
/*Font*/
/* Reset*/
*,
*::before
*::after
{
  -webkit-box-sizing:border-box ;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
 
  /*text-shadow: #fff 1px 1px 4px;*/
}
/* Start Style*/
.main__menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .main__menu {
    grid-template-columns: 1fr;
    max-width: 300px;
    
  }
}
.main__menu .list-item:hover .drop-menu li {
  display: block;
  transition: all 0.5s linear;
 
}
.main__menu .list-item:hover .menu-1 {
  perspective: 1000px;
}
.main__menu .list-item:hover .menu-1 .drop-item {
  opacity: 0;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(1) {
  animation-name: leftToRight;
  animation-duration: 400ms;
  animation-delay: -150ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(2) {
  animation-name: leftToRight;
  animation-duration: 400ms;
  animation-delay: 0ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(3) {
  animation-name: leftToRight;
  animation-duration: 400ms;
  animation-delay: 150ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(4) {
  animation-name: leftToRight;
  animation-duration: 400ms;
  animation-delay: 300ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
 

Allegati

  • InkedElementor _ test_page – Mozilla Firefox 2021-09-14 08-44-10.gif
    InkedElementor _ test_page – Mozilla Firefox 2021-09-14 08-44-10.gif
    528,4 KB · Visite: 19

WmbertSea

Utente Attivo
28 Nov 2014
209
33
28
Ciao e benvenuto, è un problema di posizionamento degli elementi. In particolare può essere applicata la proprietà css position:absolute per creare un effetto overlay, cioè per fare in modo che l'elemento risulti in sovrapposizione rispetto ad altri.

Bisogna comunque valutare nel dettaglio le regole che puoi applicare nel tuo caso specifico, in base a ciò che vuoi ottenere di preciso.

Prova ad aggiungere una cosa del genere nel tuo css e vedi se può andare:
CSS:
.main__menu .list-item {
    position: relative;
}
.main__menu .list-item .drop-menu {
    position: absolute;
    width: 100%;
}

Fai sapere, buon proseguimento.
 
  • Like
Reactions: psikolele
Discussioni simili
Autore Titolo Forum Risposte Data
W [CSS] Menù dropdown aggiungere un SUB-Menu HTML e CSS 0
S Gestire scelta dropdown con dati da Mysql PHP 2
S spostare il pulsante menu dropdown HTML e CSS 8
Alex_70 Visualizzare anteprima foto in dropdown PHP 2
F Dropdown menu con tabella PHP 33
felino [HTML] Font Awesome icon all'interno di una dropdown HTML e CSS 3
L Navbar dropdown con Bootstrap: link ai css CMS (Content Management System) 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
L [HTML] Menu di 4 livello "dropdown menu" HTML e CSS 6
F Slide down/up dropdown Bootstrap jQuery 0
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
F errore select option dropdown list jQuery 15
J Bootstrap dropdown menu non funziona con jquery-1.8.2??? jQuery 5
A Problema Menu dropdown orizzonate HTML e CSS 1
C Login DropDown WordPress 0
L menu dropdown orizzontale su 3 livelli. Evidenziare la voce generale HTML e CSS 0
andre9004 Dropdown menu con .hover() jQuery 2
L Selezione da database con DropDown Menu e visualizzazione PHP 10
C Multi DropDown... Funzionamento PHP 3
C Roundec Corner Select ( Dropdown menu) HTML e CSS 1
D Menu con immagine a stile DropDown jQuery 0
D dropdown panel con ajax e aspnet 3.5 ASP.NET 6
G Menù a tendina di ricerca con query PHP 1
F menù select dinamico da db in php PHP 3
L Menù con switch case C/C++ 1
J Richiama descrizione da menù PHP 11
Z Menù di navigazione responsivo HTML e CSS 0
R Barra del menù principale decentrata Joomla 4
M Stringa con spazi nel menù a tendina PHP 4
A Menù a tendina collegato a database PHP 13
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1
Tommy03 Contenitore non si nasconde dietro al menù HTML e CSS 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
C [PHP] Form con Inserimento dati dalla maschera e un menù a discesa che prende i dati dal db PHP 1
C [PHP] Form inserimento più menù a discesa PHP 9
V Menù CSS da file in cartella esterna HTML e CSS 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
F [HTML] Responsive menù CMS (Content Management System) 0
A [PHP] menù con links esterni PHP 6
D Come inserire opzioni menù prelevandole dal database con PHP ? PHP 12
F [HTML] li menù width HTML e CSS 3
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
ecosito [Wordpress] La barra del menù mi nasconde la parte alta delle pagine WordPress 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
F Problema hover voce di menù Javascript 2
F Nascondere menù onclick sottovoce jQuery 0
F Active menù HTML e CSS 2
A menù a tendina aiuto PHP 1
M Menù a tendina editabile HTML e CSS 0

Discussioni simili