Menyer i Drupal

Anonym
Anonyms bilde

Jeg har laget en meny (primærmeny) med flere undermenyer (sekundærmenyer). Jeg ønsker at undermenyene skal være skjult inntil jeg trykker på knappen for hovedmenyen, dvs jeg ønsker å få frem undermenyene når jeg trykker på hovedmenyen. Hvordan får jeg det til ? Slik det er nå vises alle undermenyene under hovedmenyen.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Primær og sekundærmenyer

Hei, det kommer litt ann på hvordan du mener at sekundærmenyen skal komme under hovedmenyen. I tillegg kommer det ann på hvordan themet du bruker i Drupal er laget.

La meg først skissere hva jeg tror du mener.

  1. Du har en primærmeny, i primærmenyen har du elementene A, B og C.
  2. For element A har du elementene 1, 2 og 3 i sekundærmenyen
  3. Når du klikker på element A i primærmenyen skal element 1, 2 og 3 vises i sekundærmenyen

Hvis dette er riktig, så trenger du ikke å definere linkene dine i sekundærmenyen, du kan definere dem direkte i primærmenyen. Når du ser på primærmenyen fra domene.com/admin/build/menu-customize/primary-links så skal du se dette:

Elementer i primærmeny

For å få opp element 1, 2 og 3 som underelementer av A kan du flytte dem under ved å dra dem under element A i menyen ovenfor, eller sette dem som underelementer av A når du definerer dem fra denne drop down boksen:

Underelementer i primærmeny

Hvis man klikker på "Element A" i primærmenyen nå, så vil element 1, 2 og 3 vises. Hvis man ikke er på "Element A", så vises ikke elementene 1, 2 og 3. (Med mindre du har satt dem til "aktivert" da du definerte dem. Da vises menypunktene hele tiden).

Vise underelementer av primærmeny i sekundærmeny

I eksemplet ovenfor vises alle elementene i den samme blokken (en meny er en blokk). Det er fordi alle menypunktene er definert i primærmenyen.

I themet ditt har primærmenyen og sekundærmenyen sin egen plassering. Hvis du ønsker at underelementene av A, (1, 2 og 3) skal vises der sekundærmenyen har sin plassering, så kan du få til dette ved å definere "Primærlenker" som "Kilde for primærlenker" og "Kilde for sekundærlenker" fra domene.com/admin/build/menu/settings, slik:

Primærmeny og sekundærmeny som primærmeny

Du får da opp A der themet ditt har plassert primærlenkene, og hvis du element A nå, så vil element 1, 2 og 3 vises der sekundærmenyen vanligvis vises.

Anonym
Anonyms bilde
Takk for svar, fulgte dine

Takk for svar, fulgte dine anvisninger men fikk desverre dette ikke til å fungere. Helst ønsker jeg menyene slik at når man holder cursor over "Element A" så vises "elementene 1,2,3, osv. Se eksempel på "reisastua.no" (menyene i venstre kolonne). Er det mulig å få dette til i Drupal.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Suckerfish meny i Drupal CMS

Hei, grunnen til at jeg ikke har fått svart før nå er fordi websiden du viser til har vært nede. Var innom å sjekket nå og ser at det du er ute etter er en såkalt "suckerfishmeny". Hvis du ser på fanene helt øverst her på Hjemmeside, og holder musa over fanene "Koding" og "Publiseringsverktøy", så ser du at jeg har samme funksjonalitet her.

For at du skal få slike menyer kreves det at themet du bruker har støtte for det. Hvilket theme bruker du? Videre må du gjøre som jeg har forklart under "Vise underelementer av primærmeny i sekundærmeny" i tråden ovenfor. Dette fungerer i alle fall utmerket her.

Gir du meg navnet på themet du har brukt, og jeg har mulighet til å teste det, så skal jeg se hva jeg finner ut.

Anonym
Anonyms bilde
Takk for svar, ja du har

Takk for svar, ja du har samme funksjonalitet på "Hjemmeside" som jeg ønsker. Themet jeg bruker er "Marinelli" som egentlig har 3 themer. Jeg bruker det som heter "Giordani".

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Themet støtter ikke suckerfish i sidemenyene

Themet du bruker har dessverre ikke støtte for denne typen menyer ved sidebarene, kun for linkene i headeren. Hvis du skal skru på dropdown menyer herfra, gjør du det på følgende måte:

  1. Gå til domene.com/admin/build/themes/settings/giordani
  2. Nederst aktiverer du "Drop down"

Du vil da få en dropdownmeny øverst ved headeren i themet ditt. For å få funksjonaliteten du ønsker må du kode inn litt CSS selv, kan du CSS?

Anonym
Anonyms bilde
Takk for rask tilbakemelding,

Takk for rask tilbakemelding, kan desverre ikke kode i CSS. Er det mye arbeid å kode den funksjonaliteten jeg ønsker for sidebarene. 

 

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Suckerfish i Giordani under Marinelli Drupal Theme

Ja, det er endel arbeid å kode inn slike suckerfishmenyer, spesielt i dette themet, siden det har få selectorer på menyene. Skal likevel være snill å hjelpe deg. For at vi skal følge hverandre oppretter vi samme meny fra bunn begge to.

Helt nederst i denne posten finner du en link hvor du kan laste ned ei zipfil med alle de modifiserte filene, men det er sterkt anbefalt at du leser gjennom hele posten slik at du ser sammenhengene.

Lage meny i Drupal CMS

Vi lager menyen suckerfish fra domene.com/admin/build/menu/add - du kan gi den hvilken tittel du vil, men navnet må være "suckerfish".

Legg inn elementer i suckerfishmenyen

Vi legger så inn elementer i suckerfishmenyen. (fra domene.com/admin/build/menu-customize/menu-suckerfish)

Disse skal være foreldre og barn, eller rot- og underelementer om du vil. Det er viktig at elementene du lager er aktivert og utvidet som på bildet under.

Aktiverte menyelementer i Drupal CMS

Når du har lagt inn alle hovedelementene (foreldre) og underelementene (barna) på denne måten, er tiden moden for å plassere menyen.

Plassere suckerfishmeny i venstre sidestolpe

Gå til domene.com/admin/build/block - finn menyen din under "Deaktivert" og dra den opp til "Venstre sidestolpe" og klikk "Lagre blokker".

Du får da opp menyen i venstre sidestolpe. Alle hoved- og underelementer i menyen skal være synlig.

Opprette suckerfish-filer

Det neste vi må gjøre nå er å opprette noen nye filer. Vi skal opprette to filer, én med JavaScript (jQuery) og en med CSS. Førstnevnte tar seg av skjuling og visning av undermenyene, mens CSS avgjør hvordan menyen skal se ut.

Opprette suckerfish.js

I suckerfish.js-filen skal vi ha kode som viser menyene når man tar musa over rotelementer. Denne filen skal lagres i katalogen "giordani" under rotkatalogen for themet ditt, "marinelli".

$(document).ready(function(){
  $('#block-menu-menu-suckerfish li').hover(
    function(){
      $('ul:first', $(this)).show();
    },
    function(){
      $('ul', $(this)).hide();
    }
  );
});

Opprette suckerfish.css

I suckerfish.css-filen skal du ha all koden som er lagt inn nedenfor. Denne filen skal lagres i "giordani"-katalogen under "marinelli".

@charset "utf-8";
/* CSS Document */

/* set width/height on <li>, <a>, <li><ul> */
#block-menu-menu-suckerfish li ul,
#block-menu-menu-suckerfish li,
#block-menu-menu-suckerfish a {
width: 125px;
height: 25px;
}

/* remove <li> list styling off */
#block-menu-menu-suckerfish li {
list-style: none;
}

/* display <a> as block */
#block-menu-menu-suckerfish a {
display: block;
}

/* set <li> position */
#block-menu-menu-suckerfish li {
position: relative;
}

/* set position of <ul> in <li> */
#block-menu-menu-suckerfish li ul {
top: 0;
left: 140px;
position: absolute;
border: 1px solid orange;
background: #ffffff;
display: block;
height: auto;
width: auto;
}

/* position child <ul> */
#block-menu-menu-suckerfish li ul ul {
margin: -25px 0 0 125px;
}

/* set visibility of <ul> in <li> */
#block-menu-menu-suckerfish li ul {
display: none;
}

Hente inn filene til theme via giordani.info

Vi må inkludere css- og javascriptfilene til giordani themet. For å gjøre dette åpner vi filen "giordani.info" og finner følgende linje:

stylesheets[all][] = giordani.css

Rett under denne legger vi inn:

stylesheets[all][] = suckerfish.css
scripts[] = suckerfish.js

Modifisere filer i Marinelli theme

Til slutt må vi modifisere to filer i katalogen "marinelli", henholdsvis "template.php" og "block.tpl.php". Dette er fordi vi ønsker at det skal settes IDer på menyelementene. Det er nødvendig for at CSSen vi har laget skal gjelde for elementene vi ønsker.

Marinelli theme: template.php

Nederst i denne filen legger du inn følgende PHP-kode uten <?php og ?>:

<?php
function marinelli_id_safe($string) {
 
// Replace with dashes anything that isn't A-Z, numbers, dashes, or underscores.
 
$string = strtolower(preg_replace('/[^a-zA-Z0-9_-]+/', '-', $string));
 
// If the first character is not a-z, add 'n' in front.
 
if (!ctype_lower($string{0})) { // Don't use ctype_alpha since its locale aware.
   
$string = 'id' . $string;
  }
  return
$string;
}
?>

Marinalli theme: block.tpl.php

Siste steg er å redigere block.tpl.php i katalogen marinelli. Den ser slik ut i utgangspunktet:

<div class="defaultblock">
    <h2><?php print $block->subject; ?></h2><!--block title-->
   <div class="blockcontent"><?php print $block->content; ?></div>
</div>

Fjern alt sammen og legg inn

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="defaultblock">
    <h2><?php print $block->subject; ?></h2><!--block title-->
   <div class="blockcontent"><?php print $block->content; ?></div>
</div>

Last opp alle redigerte filer til webhotell

Du kan nå laste opp alle de nye og redigerte filene til webhotellet ditt. Hvis du ikke liker designet og ønsker hjelp med å style det etter eget ønske anbefaler jeg først og fremst at du lærer deg elementær CSS ved hjelp av videoguidene her på Hjemmeside. (CSS er veldig enkelt. :) Deretter kan du spørre om hjelp for å få det utseendet du ønsker deg.

Her er en zipfil med modifiserte themefiler for å få suckerfishmeny i Giordani under Marinelli i Drupal CMS. Du må overskrive de andre themefilene på webhotellet ditt for å få suckerfishmeny.

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.