Archief - Horizontale lijst icm verticale subitems

p

pina

Legacy Member

• 9 apr 2012

• #1

ik ben mij eigenlijk een beetje suf aan het zoeken op dit:

Screen Shot 2012-04-09 at 17.09.37.png

let wel op de verschillende opmaak bij het submenu tov het hoofdmenu.

kan ik dat in 1 lijst gieten of moet ik daarvoor toch 2 lijsten gebruiken? Een eerste lijst die horizontaal werkt en daaronder een vertikale lijst? Al is het wel lastig om die 2 dan onder elkaar te matchen...

D

Dastardly

Legacy Member

• 9 apr 2012

• #2

A List Apart: Articles: CSS Design: Taming Lists

^ die linkt pak ik er meestal bij. staat alles heel netjes uitgelegd.

nuja, ik zie er toch gewoon 3 geneste lists naast elkaar staan

HTML:

<ul>
  <li>
    <span>Menu 1</span>
    <ul>
      <li>niv 2</li>
      <li>niv 3</li>
    </ul>
  </li>
</ul>

<ul>
  <li>
    <span>Menu 2</span>
    <ul>
      <li>niv 2</li>
      <li>niv 3</li>
    </ul>
  </li>
</ul>

<ul>
  <li>
    <span>Menu 3</span>
    <ul>
      <li>niv 2</li>
      <li>niv 3</li>
    </ul>
  </li>
</ul>

HTML:

ul { float:left; width: xx px; }
li span { font-weight:bold; }

etc...

als die "menu x" niet aanklikbaar zijn zou ik ze zelfs helemaal uit uw lijsten halen.

-

-BVR-

Legacy Member

• 9 apr 2012

• #3

vertikaal? En dat voor een eindredacteur?

En zoals Dastardly zegt: ik zou het ook in verschillende menu's gieten. Misschien zelfs met divjes en h's tussen:

HTML:

<div class="menuwrapper">
  <h1>Menu 1</h1>
  <ul>
    <li>niv 2</li>
    <li>niv 3</li>
  </ul>
</div>

<div class="menuwrapper">
  <h1>Menu 2</h1>
  <ul>
    <li>niv 2</li>
    <li>niv 3</li>
  </ul>
</div>

<div class="menuwrapper">
  <h1>Menu 3</h1>
  <ul>
    <li>niv 2</li>
    <li>niv 3</li>
  </ul>
</div>

p

pina

Legacy Member

• 9 apr 2012

• #4

thnx voor de antwoorden! Probleem is dat wanneer ik het hoofditem uit de list plaats, dan komen wordt de interlinie daaronder plots heel groot. Als ik dan het hoofditem als deel laat uitmaken van de lijst, plakt de items eronder er veel dichter tegen aan...

Screen Shot 2012-04-09 at 18.58.08.png

bij Menu 1 is het uit de lijst gehaald, bij de anderen niet.

p.s. het is paasmaandag, dus de eindredacteur in mij is afwezig

Z

Zero Grav

Legacy Member

• 9 apr 2012

• #5

Waarom zoudt ge die uit elkaar halen (Dastardly en BramVroy)? Als ze effectief zo langs elkaar staan dan is het zowat hetzelfde principe als een dropdown menu. Is één samenhorend navigatiegedeelte voor zover ik kan zien.

Edit this Fiddle - jsFiddle

-

-BVR-

Legacy Member

• 9 apr 2012

• #6

@pina: grote spatie eronder -> margin-bottom: 0;
@Zero Grav: omdat het semantisch niet logisch is imo, als het aparte menu's zijn. Ik zou dan verschillende UL's in één '<nav>' steken.

Z

Zero Grav

Legacy Member

• 9 apr 2012

• #7

Daar zal dan toch eerst een antwoord op moeten komen, Pina. Of ge effectief 3 volledig losstaande menu's hebt die ge langs elkaar wilt zetten (kan me zo geen situatie voorstellen) of dat ge met menu 1, menu 2 en menu 3 gewoon verschillende pagina's in één navigatie wilt uitbeelden.

p

pina

Legacy Member

• 9 apr 2012

• #8

wel ja, het zijn gewoon 3 hoofdmenu's naast elkaar met elk een submenu. Hetzelfde principe als je een ordinair vertikaal menu hebt met submenu's. Dus eigenlijk zoals je het toont in je link