Menu a freccia

[robertova]

Salve a tutti, sono nuovo di questo forum. Ho girato invano per molto tempo per cercare di fare quello che sto per chiedere a voi.
Vorrei creare un menu come questo, ma alla fine del rettangolo vorrei unirci una vera e propria freccia.
Penso si debba lavorare con il CSS, ma non sono un professionista.. Grazie in anticipo!


HTML:

            <div id="menu">
                <ul>
                    <li><a class="corrente" href="index.html">Home Page</a></li>
                    <li><a href="appunti.html">Appunti</a>
                    <ul>
                        <li><a href="lezione1.html">Lezione I</a></li>
                    </ul>
                    </li>
                    <li><a href="video.html">Video Lezione</a></li>
                    <li><a href="chisiamo.html">Chi siamo</a></li>
                    <li><a href="contatti.html">Contatti</a></li>
                </ul>      
            </div>

CSS:

#menu {
clear:left;
float:left;
width:400px; /* distanza menu-testo */
margin:0 0 10px 0;
padding:0;
}


#menu ul {
list-style:none;
width:400px; /* larghezza menu */
margin:0 0 20px 0;
padding:0;
}


#menu li {
margin-bottom:5px;
}


#menu li a {
font-weight:bold;
height:30px; /* altezza menu */
text-decoration:none;
color:#505050;
display:block;
padding:6px 0 0 10px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
border-top:1px solid #1E90FF;
border-right:1px solid #1E90FF;
border-bottom:1px solid #1E90FF;
border-left:4px solid #1E90FF;
line-height:25px;
}


#menu ul li ul {
margin:5px 0 5px 15px;
font-size:0.9em;
display:none;
width:170px;
}


#menu ul li:hover ul{
display: block;
z-index:1;
padding: 0;
width:370px; /* larghezza mini menu */
color:#505050;
font-size:0.9em;
}


#menu li a:hover, #menu li a.corrente {
background:#eaeaea url(img/menubg2.gif) bottom left repeat-x;
color:#505050;
border-top:1px solid #1E90FF;
border-right:1px solid #1E90FF;
border-bottom:1px solid #1E90FF;
border-left:4px solid #0000FF;
}


#menu ul ul a {
height:30px; /* altezza mini menu */
margin:0;
padding:4px 0 0 8px;
}




#contenuto {
margin:25px 30px 50px 220px;
padding:0;
line-height:1.5em;
}


#footer {
clear:both;
margin:0 auto;
padding:8px 0;
border-top:2px solid #dadada;
width:800px;
text-align:center;
color:#808080;
background-color:#ffffff;
font-size:0.9em;
}


#footer a {
color:#808080;
background-color:inherit;
text-decoration:none;
}


#footer a:hover {
text-decoration:underline;
}

[KillerWorm]

Ciao e benvenuto.
Sì, col CSS è possibile elaborare qualche forma. Dalle indicazioni che hai fornito non si capisce però quale risultato vuoi ottenere esattamente. Puoi fornire maggiori dettagli o mostrare un esempio grafico; anche una semplice bozza fatta da te può andar bene.

Buona domenica.


[Mod]
Quando si posta del codice sul forum è opportuno utilizzare gli appositi tag di formattazione per rendere più comprensibile il tutto. Vedere regolamento di sezione (tra le discussioni in evidenza). Grazie. Per il momento ho provveduto io editando il tuo post.

[robertova]

Grazie per avermi corretto. Vorrei fare una cosa di questo genere, prima mi sono espresso sicuramente male.
Immagine.png

[KillerWorm]

Bene per la bozza. Tieni conto che puoi risolvere in diversi modi.
Giusto qualche precisazione: col solo CSS in genere si sfruttano gli pseudo-elementi (::after e ::before) che possono essere formattati in modo da creare in qualche modo della grafica senza necessità di aggiungere markup HTML. Sia chiaro però che la loro natura non è esattamente quella di essere degli elementi grafici, ma più che altro sono dei contenitori a cui è possibile applicare delle proprietà CSS così come per uno span o un div. Questo metodo ovviamente ha delle limitazioni e in alcuni casi richiede dei compromessi.

Altre soluzioni possono trovarsi con l'uso di immagini create ad hoc con programmi grafici, che possono essere di tipo bitmap (jpg, gif, png, ecc) o vettoriali (svg). Queste immagini possono essere inserite attraverso opportuni elementi HTML, oppure anche attraverso quegli stessi pseudo-elementi CSS.

A seconda delle necessità è preferibile magari utilizzare un metodo piuttosto che un altro.

In sostanza, col primo metodo devi valutare cosa puoi ottenere e se può soddisfare le tue esigenze. Puoi intanto fare una ricerca del tipo: css arrow shape

Personalmente non ho ben capito come vorresti impostare il tutto ma ho provato ad assemblare il tuo codice con qualche esempio trovato sul web per ricreare grossomodo quanto hai raffigurato nella bozza:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #menu {
        clear: left;
        float: left;
        width: 400px;        /* distanza menu-testo */
        margin: 0 0 10px 0;
        padding: 0;
      }
      #menu ul {
        list-style: none;
        margin: 0 0 20px 0;
        padding: 0;
      }
      #menu li {
        margin-bottom: 5px;
      }
      #menu li a {
        font-weight: bold;
        box-sizing: border-box;
        width: 400px;        /* larghezza menu */
        height: 38px;        /* altezza menu */
        text-decoration: none;
        color: #505050;
        display: block;
        padding: 6px 0 0 10px;
        background: #f4f4f4;
        border: 1px solid #1E90FF;
        border-left: 4px solid #1E90FF;
        line-height: 25px;
      }
      #menu ul li ul {
        margin: 5px 0 5px 15px;
        font-size: 0.9em;
        display: none;
      }
      #menu ul li:hover ul {
        display: block;
        z-index: 1;
        padding: 0;
        color: #505050;
        font-size: 0.9em;
      }
      #menu li a:hover,
      #menu li a.corrente {
        background: #eaeaea;
        color: #505050;
        border-left-color: #0000FF;
      }
      #menu ul ul a {
        width: 370px;        /* larghezza mini menu */
        height: 30px;        /* altezza mini menu */
        margin: 0;
        padding: 4px 0 0 8px;
      }
      #contenuto {
        margin: 25px 30px 50px 220px;
        padding: 0;
        line-height: 1.5em;
      }
      #footer {
        clear: both;
        margin: 0 auto;
        padding: 8px 0;
        border-top: 2px solid #dadada;
        width: 800px;
        text-align: center;
        color: #808080;
        background-color: #ffffff;
        font-size: 0.9em;
      }
      #footer a {
        color: #808080;
        background-color: inherit;
        text-decoration: none;
      }
      #footer a:hover {
        text-decoration: underline;
      }
      
      #menu a:not(:only-child) {
        position: relative;
        width: 410px;
        border-right: 0;
        z-index: 0;
      }
      #menu a:not(:only-child):after,
      #menu a:not(:only-child):before {
        border: solid transparent;
        content: '';
        height: 0;
        left: 100%;
        position: absolute;
        width: 0;
        z-index: -1;
      }
      #menu a:not(:only-child):after {
        border-width: 28px;
        border-left-width: 100px;
        border-left-color: #f4f4f4;
        top: -10px;
      }
      #menu a:not(:only-child):before {
        border-width: 29px;
        border-left-width: 103px;
        border-left-color: #1E90FF;
        top: -11px;
      }
      #menu li a:not(:only-child):hover:after,
      #menu li a.corrente:not(:only-child):after {
        border-left-color: #eaeaea;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <ul>
        <li><a class="corrente" href="index.html">Home Page</a></li>
        <li><a href="appunti.html">Appunti</a>
          <ul>
            <li><a href="lezione1.html">Lezione I</a></li>
          </ul>
        </li>
        <li><a href="video.html">Video Lezione</a></li>
        <li><a href="chisiamo.html">Chi siamo</a></li>
        <li><a href="contatti.html">Contatti</a></li>
      </ul>
    </div>
  </body>
</html>

Eventualmente cerca di capire come funziona. Magari dovrai aggiustarlo secondo le tue esigenze ma intanto può essere un punto di partenza.

Buon proseguimento.