Back to top

Autore Topic: [RISOLTO] sotto menù  (Letto 2796 volte)

Offline ssj00

  • Nuovo arrivato
  • *
  • Post: 27
    • Mostra profilo
[RISOLTO] sotto menù
« il: 05 Ott 2010, 10:25:02 »
si parla di: http://www.hongmethod.joomlafree.it/maestri-e-insegnanti.html
nel menù i sotto menù si aprono sopra le voci principali a causa del fatto che condividono le proprietà margin e padding con le voci principali. sarebbe possibile evitare che i sotto menù si sovrappongano alle voci principali? 
« Ultima modifica: 08 Ott 2010, 10:04:30 da ssj00 »

Offline daffy_dark

  • Esploratore
  • **
  • Post: 66
  • Sesso: Femmina
    • Mostra profilo
Re:sotto menù
« Risposta #1 il: 05 Ott 2010, 14:45:47 »
vediamo se ho capito bene:
ora si visualizzano tutte le voci di menu e sotto menu invece giustamente vorresti che al click di un tasto si apra il corrispondente sotto menu..( tipo cosi sul mio sito di prova cliccando home? http://daffydark.altervista.org/ )
questo è fattibile ma con un codice css corretto...se è giusto cosi ti passo poi il codicino se vuoi
« Ultima modifica: 05 Ott 2010, 14:56:38 da daffy_dark »

Offline ssj00

  • Nuovo arrivato
  • *
  • Post: 27
    • Mostra profilo
Re:sotto menù
« Risposta #2 il: 06 Ott 2010, 20:47:03 »
passa passa spiega bene che sono inesperto

Offline daffy_dark

  • Esploratore
  • **
  • Post: 66
  • Sesso: Femmina
    • Mostra profilo
Re:sotto menù
« Risposta #3 il: 07 Ott 2010, 11:08:09 »
ecco qui:
allora ho notato che il template è fatto con un famoso programmino.
innanzitutto dove dice:
/* begin Box, BlockContent */

vai a commentare o togliere le classi da "art-BlockContent-body a:link" fino a "art-BlockContent-body ul li" compreso... comunque in questo pezzo di codice copiato visualizzi la parte citata commentata. Dopo di che inizia la parte vera e propria in cui stabilisci tutte le proprietà del menu e sottomenu. Ovviamente sta a te poi sistemare le varie dimensioni,padding, le immagini utilizzate per i pulsanti etc.. c'è anche da dire che nel sottomenu viene chiamata la stessa immagine usata per il menu principare e ovviamente spostata per dare l'effetto di sottomenu desiderato (nel mio caso si chiamano tasto.. e tasto-hover che da l'effetto del pulsante cliccato). Ti dico già che non puoi creare un sottomenu con grafica differente dal menu principale perchè ci ho provato e non si riesce.(il sito di esempio che ti avevo linkato ti rende ben noto questo)
Non ti resta che fare un bel copia incolla generale di questo pezzo e personalizzarlo a piacere ;)


.art-BlockContent
{
   position:relative;
   z-index:0;
   margin:0 auto;
   min-width:1px;
   min-height:1px;
}

.art-BlockContent-body
{
   position: relative;
   z-index: 1;
   padding: 3px;
}

.art-BlockContent-cc
{
   position:absolute;
   z-index:-1;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: #FFFFFF;
}


.art-BlockContent-body
{
   color:#333;
   font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
   font-size: 13px;
   font-style: normal;
   font-weight: bold;
   text-align: left;
}

/*.art-BlockContent-body a:link
{
   color: #36368C;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 13px;
text-decoration: none;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
   color: #36368C;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 13px;
text-decoration: none;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
   color: #CD071E;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 13px;
text-decoration: underline;
}

.art-BlockContent-body ul
{
   list-style-type: none;
   color: #13133E;
   margin:0;
   padding:0;
}

.art-BlockContent-body ul li
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 12px;
line-height: 125%;
  line-height: 1.25em;
  padding: 0px 0 0px 13px;
  background-image: url('../images/BlockContentBullets.png');
  background-repeat: no-repeat;
}

/* end Box, BlockContent */


/*inizio del mio menu personalizzato*/


.art-BlockContent-body ul.menu {
   list-style: none;
   text-align: right;
   margin:0;
   padding: 0 0px 0px 0;
}



.art-BlockContent-body ul.menu li{
   margin:0 0 1px 0;
}

.art-BlockContent-body ul.menu li:hover{
}


.art-BlockContent-body ul.menu li ul li{
}
.art-BlockContent-body ul.menu li a, .art-BlockContent-body ul.menu li a:link {
   display:block;
   font-weight: 600;
   font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
   font-size: 13px;
   height:23px;
   padding:5px 0px 0 10px;
   text-decoration: none;
   color:#cd071e;
   overflow:hidden;
   background: transparent url(../images/tasto.png) no-repeat left center;
   text-align:left;   
}


.art-BlockContent-body ul.menu li a:hover {
   color: #fff;
   font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
   background: transparent url(../images/tasto-hover.png) no-repeat left center;
}

.art-BlockContent-body ul.menu li#current {
   
}

.art-BlockContent-body ul.menu li#current a:hover{
   display:block;
   color: #fff;
   background: transparent url(../images/tasto-hover.png) no-repeat left center;
}
 .art-BlockContent-body ul.menu li#current{
}

.art-BlockContent-body ul.menu li#current a, .art-BlockContent-body ul.menu li#current a:link {
   display:block;
   color: #fff;
   background: transparent url(../images/tasto-hover.png) no-repeat left center;
}

.art-BlockContent-body ul.menu li#current {
   
}

.art-BlockContent-body ul.menu li#current a:hover{
   display:block;
   color: #fff;
   background: transparent url(../images/tasto-hover.png) no-repeat left center;
}

/*LEFT COL SUB LINK*/
.art-BlockContent-body ul.menu li#current ul li a, .art-BlockContent-body ul.menu li#current ul li a:link {
   font-weight: 400;
   text-decoration: none;
   color:#cd071e;
   margin:0 0 0 20px;
   height:23px;
   padding:5px 0px 0 10px;
   background: transparent url(../images/tasto.png) no-repeat left center;
   text-align:left;
   
}

.art-BlockContent-body ul.menu li#current ul li a:hover {
   padding:0 0 0 20px;
   color: #fff;
   background: transparent url(../images/tasto-hover.png) no-repeat left center;
   height:23px;
   padding:5px 0px 0 10px;
   
}

.art-BlockContent-body ul.menu li ul li#current, #rightcolumn ul.menu li ul li#current {
}

.art-BlockContent-body ul.menu li.parent ul li{
}

.art-BlockContent-body ul.menu li.parent ul li a {
   font-size: 11px;
   font-weight: 400;
   text-decoration: none;
   color:#cd071e;
   margin:0 0 0 20px;
   height:23px;
   padding:5px 0px 0 10px;
   text-align:left;
}

.art-BlockContent-body ul.menu li.parent ul li a:hover {
   color: #fff;
   background: transparent url(../images/tasto-hover.png) no-repeat left center;
   
}

/*SUBMENU POSITION*/
.art-BlockContent-body ul.menu li#current ul {
   margin: 0;
   padding: 0;
}

.art-BlockContent-body ul.menu li#current ul li {
   margin: 0;
   padding: 0;
}

/*CURRENT SUBMENU POSITION*/
.art-BlockContent-body ul.menu li ul {
   margin: 0;
   padding: 0;
}


.art-BlockContent-body ul.menu li ul
 {
   list-style: none;
   margin:0;
}

/*fine mio codice*/

/* begin Box, Post */
« Ultima modifica: 07 Ott 2010, 11:12:20 da daffy_dark »

 



Web Design Bolzano Kreatif