Nice menu egyéni css

Ha lenne egy élő fejlesztői (és nem lokális) weblap cím, amin láthatnánk a bugos navigációs menüt, akkor sokkal könnyebben tudnánk segíteni.

Csak magamból indulok ki ha Drupal designról van szó: Ha nem látom a kihívásra késztető ill. segítségnyújtásra szoruló weblapot, akkor minek vesződjek a beillesztett kód áttanulmányozásával? Számomra legalább annyira jól esne egy kolléga munkájára rápillantanom, mint ahogy a kódjára.

Ha megadod a weblap fejlesztői linkjét akkor szivesen rápislantok, nem lehet olyan nagy a baj a leírásod alapján.

Mivel voltál olyan kedves és privát levélben elküldted a weblap elérhetőségét, sikerült egy rövid pillantást vetni a Nice menu modul által generált html szerkezetre és stílusra. Gyakorlatilag minden "li" felsorálás és minden "a" hivatkozás kap egy-egy stílust, azonosítót, stb. ezért úgy gondoltam, hogy én inkább nem piszkálok bele a munkádba.

Ettől föggetlenül ha érdekel, akkor szivesen megmutatom, hogy miképp lehet külső modul nélkül pusztán stíluslappal megoldani a többszintű menükezelést Drupal alatt.

Pusztán CSS segítségével a :hover állapotot felhasználva el lehet érni a kívánt hatást. Egyébként ez széleskörben elterjedt. A mobil tapogatós eszközökön is lehet használni, mert rendben megjelenik az almenü a tapasztalataim szerint.

Készítettem a számodra egy minta alsminket is a Stark téma alapján. Ezt felhasználva + egy kis módosítással akár 2-3 kattintással el lehet érni, hogy működjön az általad kíván menü és stílus.

TESZTKÖRNYEZETBEN HASZNÁLD ÉS PRÓBÁLD KI VAGY MÓDOSÍTSD!

A koncepció a következő:

1. Installáld a Stark Alsminket amit belinkeltem a hozzászólásomban. Előfeltétel, hogy a Stark engedélyezve legyen a "Megjelenés" beállítási oldalon.
2. A Stark Alsmink beállításánál kapcsold ki a "Főmenü" és "Másodlagos menü" opciót (sokat lehetne arról beszélgetni, hogy van-e valami értelme ennek funkciónak)
3. A "Felépítés" » "Blokkok" beállításnál a Főmenü blokkot állítsd a Fejléc régióba (Header).
4. A Főmenü blokk címének add meg "<none>" címkét, ezzel eltünteted a blokk címét, amire nincs szükségünk
5. A menüpontokat szerkesztve, ragadd meg és húzd az egyik almenüt a szülő menüpont alá és gyakorlatilag ezzel kész is van a többlépcsős navigációs menü. Csak egy fontos dologra kell figyelni.
6. A Címlap » Adminisztráció » Felépítés » Menük oldalt használva arra ügyelj, hogy egy egy menüpont aminek almenüt szeretnél adni úgy legyen beállítva ( » Hivatkozások listázása » Szerkesztés ), hogy a "Nyitott állapotban megjelenítve" kapcsoló mindig aktív állapotban legyen, így nyitott állapotban a menüpont gyermekei mindig látszani fognak.

Mindez amit fent írtam nem hekkelés vagy külső modul felhasználása, ilyen a Drupal 7 rendszer működése. A fenti menüpont beállítást manuálisan végezd el ott ahol kell, ne parázz, mert ezt csak egyszer kell megtenni, hiszen a menüszerkezet ritkán változik.

FELHASZNÁLÁSI TIPP:

• A Stark Alsmink "style.css" kódját áttanulmányozva bátran felhasználhatod azt a weblapod elkészítéséhez.
• A zöld és barna színeket az önkormányzati honlapod alapján használtam fel.
• Egy kis CSS3-mal meg tudod úgy fűszerezni a menüt, hogy az pl. nyilakat tartalmazzon, az aktív állapot külön színt kapjon, elválasztó vonalakat, fentről-lefelé vagy balról-jobbra animálódjon, stb. Mindehhez ma már JavaScript sem kell csak alapos CSS ismeret.

Egy élő weblapot is tudok mutatni, ahol ezt a módszer alkalmaztam (igaz, hogy az ott látható kód nem valami mestermunka):

• Dunaújvárosi Labdarúgó Szövetség hivatalos weblapja

Remélem, hogy tudtam segíteni:

FORRÁSANYAG:

• Bemutató kép: böngésző
• Bemutató kép: mobil eszköz
• Drupal minta smink: Spark Alsmink

Stark Alsmink "starkalsmink.info" fájl:

name        = Stark Alsmink
description = Ez egy alsmink gyakorlati célból létrehozva. További hasznos infó magyar nyelven: http://drupal.hu/node/15822
package     = Core
version     = 1.0
core        = 7.x
engine      = phptemplate
base theme  = stark
 
stylesheets[all][] = style.css

Stark Alsmink "style.css" fájl:

/**
 * sötétzöld: #3C8514;
 * barna: #a52a2a;
 */
 
 
/* ÁLTALÁNOS
------------------------------------------------------------------------------*/
body {
  background: #eee;
}
 
#page {
  background: #fff;
  margin: 30px auto;
  width: 960px;
}
 
/* MENU
------------------------------------------------------------------------------*/
#header ul.menu {
  display: block;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}
 
/* Az elso szint menupontjai horizontálisan balrol jobbra tart */
#header ul.menu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
 
/* A masodik, harmadik es negyedik szint vertikalisan fentrol lefele tart */
#header ul.menu li ul > li {
  float: none;
}
 
/* Eltuntetjuk a nem kivant menuszinteket az inaktiv allapotvan */
#header ul.menu li.expanded ul.menu,
#header ul.menu li.expanded ul.menu li.expanded ul.menu,
#header ul.menu li.expanded ul.menu li.expanded ul.menu li.expanded ul.menu {
  display: none;
}
 
/* Menupont szine */
#header ul.menu a {
  background: #3C8514;
  color: #fff;
  display: block;
  line-height: 1;
  margin: 0;
  padding: 10px;
  text-decoration: none;
}
 
#header ul.menu a:hover {
  background: #a52a2a;
}
 
/* 2. szint
------------------------------------------------------------------------------*/
#header ul.menu li.expanded:hover ul.menu {
  display: block;
  left: 0;
  position: absolute;
  top: auto; /* FONTOS!!! */
  width: 240px;
}
 
/* 3. szint
------------------------------------------------------------------------------*/
#header ul.menu li.expanded ul.menu li.expanded:hover ul {
  display: block;
  left: 240px;
  position: absolute;
  top: 0;
  width: 240px;
}
 
/* 4. szint
------------------------------------------------------------------------------*/
#header ul.menu li.expanded ul.menu li.expanded ul.menu li.expanded:hover ul.menu {
  display: block;
  left: 240px;
  position: absolute;
  top: 0;
  width: 240px;
}