Back to top

Autore Topic: Menų a tendina con Dj-menų come farlo identico al demo?  (Letto 3282 volte)

Offline dagh

  • Appassionato
  • ***
  • Post: 216
    • Mostra profilo
Salve a tutti,
sto realizzando una pagina web per una associazione in Bulgaria ( sto facendo li lo SVE, Servizio Civile Europeo, per informazione contattami pure) e ho scelto come template il  jf texturia. Questo template perō non ha un menų a "tendina" avevo quindi pensato di usare qualche estensione e avevo trovato dj-menų che sembrava fare proprio al caso mio. Sul sito linkato come demo c'era proprio il menų che mi serviva ma una volta scaricata l'estensione il menų viene fuori totalmente diverso. Credo sia solo un discorso di cambiare le immagini dal  css ma non so bene dove mettere le mani...mi potete aiutare?
Il link del risultato da ottenere č http://demo.joomla-monster.com/9-jm-advertica mentre da qui si puō scaricare l'estensione http://dj-extensions.com/dj-menu (bisogna registrarsi).
Grazie a tutti


adottauncane

  • Visitatore
Re:Menų a tendina con Dj-menų come farlo identico al demo?
« Risposta #1 il: 27 Giu 2012, 01:09:49 »
Ciao dagh,
serve un link al tuo sito... Se anche uno avesse voglia di scaricare l'estensione e installarla, come farebbe a sapere com'č il tuo menų?  ;)

Offline dagh

  • Appassionato
  • ***
  • Post: 216
    • Mostra profilo
Re:Menų a tendina con Dj-menų come farlo identico al demo?
« Risposta #2 il: 27 Giu 2012, 09:44:40 »
Ciao,
in realtā il menų che voglio realizzare č quello presente in questo sito http://demo.joomla-monster.com/9-jm-advertica . Il mio sito comunque č http://iicbg.org/ ( ho creato un apposito utente per permettere di visualizzarlo user: joomlaforum password: joomlaforum) Il sito č ancora in fase di sviluppo quindi..scusate la confusione!! Il menų che vorrei sostituire č il top menų in alto che sebbene sia carino non permette di avere menų a tendina!

Offline dagh

  • Appassionato
  • ***
  • Post: 216
    • Mostra profilo
Re:Menų a tendina con Dj-menų come farlo identico al demo?
« Risposta #3 il: 27 Giu 2012, 11:32:25 »
Ok...alla fine con i ragazzi dell'ufficio abbiamo deciso di cercare di ricreare il vecchio menų invece di usare l'altro ma siccome avevo iniziato a lavorarci vi posto quello che avevo fatto fino ad ora. Bisogna modficare il file djmenu_fx.css che trovate all'interno del componente. La parte superiore č quasi completa bisogna solo cambiare il colore del carattere e bisogna finire i sottomenų..spero possa essere utile a qualcuno (tra l'altro io bordi li ho fatti con la proprietā css, l'originale č con un'immagine):

Codice: [Seleziona]
.dj-main {
    padding: 0;
    margin: 5;
    list-style: none;
    height: 35px;
    background: white;
    border-radius: 10px;
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
    position: relative;
    z-index: 500;
    font-family: arial, verdana, sans-serif;
    width: auto;
}

.dj-main li.dj-up {
    position: relative;
    display: block;
    float: left;
}

.dj-main li a.dj-up_a {
    display: block;
    float: left;
    height: 35px;
    line-height: 33px;
    color: #ccc;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 0 0 0 15px;
    cursor: pointer;
    background: white;
    border-radius: 10px;
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
}

.dj-main li a.dj-up_a span {
    float: left;
    display: block;
    padding: 0 15px 0 0;
    height: 35px;
    background: white;
    border-radius: 10px;
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
}

.dj-main li a.dj-up_a span.dj-drop {
    padding: 0 25px 0 0;
    background: white;
}

.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
    color: #fff;
    background: #774d7b;
}

.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
    background: #774d7b;;
}

.dj-main li.hover a.dj-up_a span.dj-drop, .dj-main li.active a.dj-up_a span.dj-drop {
    background: #774d7b;
    padding-bottom: 3px;
}

.dj-main li.separator > a {
    cursor: default;
}

.dj-main li a.dj-up_a span span.image-title {
    background: none;
    padding: 0 0 0 5px;
    display: inline;
    float: none;
    height: auto;
}
.dj-main img {
    border: 0;
    margin: 0;
}

/* Default list styling */
.dj-main li.hover {
    position: relative;
    z-index: 200;
}

.dj-main li.hover ul.dj-submenu {
    left: 1px;
    top: 35px;
    background: #50b5d0;
    padding: 3px;
    border: 1px solid #0b4d97;
    width: 190px;
    height: auto;
    z-index: 300;
}

.dj-main li.hover ul.dj-submenu li {
    display: block;
    height: auto;
    position: relative;
    float: left;
    width: 190px;
    font-weight: normal;
}

.dj-main li.hover ul.dj-submenu li a {
    display: block;
    font-size: 11px;
    height: auto;
    width: 183px;
    line-height: 18px;
    color: #000;
    text-decoration: none;
    border: 1px solid #50b5d0;
    padding-left: 5px;
}

.dj-main li ul.dj-submenu li a.dj-more {
    background: #50b5d0 url(../images/arrow.gif) 180px 6px no-repeat;
}

.dj-main li.hover ul.dj-submenu li a:hover, .dj-main li ul.dj-submenu li a.active, .dj-main li ul.dj-submenu li li a.active, .dj-main li ul.dj-submenu li li li a.active {
    background: #3f96a9;
    color: #fff;
    border-color: #fff;
}

.dj-main li.hover ul.dj-submenu li a.dj-more:hover {
    background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
    color: #fff;
}

.dj-main li.hover ul.dj-submenu li a.dj-more-active {
    background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
    color: #fff;
}

.dj-main li.hover ul.dj-submenu li a.dj-more-active:hover {
    border-color: #fff;
    background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
}

.dj-main li.hover li.hover ul, .dj-main li.hover li.hover li.hover ul, .dj-main li.hover li.hover li.hover li.hover ul, .dj-main li.hover li.hover li.hover li.hover li.hover ul {
    left: 190px;
    top: -4px;
    background: #50b5d0;
    padding: 3px;
    border: 1px solid #0b4d97;
    white-space: nowrap;
    width: 190px;
    z-index: 400;
    height: auto;
}

.dj-main ul, .dj-main li.hover ul ul, .dj-main li.hover li.hover ul ul, .dj-main li.hover li.hover li.hover ul ul, .dj-main li.hover li.hover li.hover li.hover ul ul {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dj-main li.hover li.hover a.dj-more, .dj-main li.hover li.hover li.hover a.dj-more, .dj-main li.hover li.hover li.hover li.hover a.dj-more, .dj-main li.hover li.hover li.hover li.hover li.hover a.dj-more {
    background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
    color: #fff;
    border-color: #fff;
}

.dj-main li.hover li.hover li a.dj-more, .dj-main li.hover li.hover li.hover li a.dj-more, .dj-main li.hover li.hover li.hover li.hover li a.dj-more {
    background: #50b5d0 url(../images/arrow.gif) 180px 6px no-repeat;
    color: #000;
    border-color: #50b5d0;
}

Edit: per inserire i codici usa il tasto #. Grazie mille.
« Ultima modifica: 27 Giu 2012, 11:45:06 da adottauncane »

 



Web Design Bolzano Kreatif