• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 14 posts ] 
Author Message
 Post subject: [OPGELOST] 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Wed Mar 13, 2013 2:13 pm 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
Ik weet niet hoe ik 't anders/beter kan omschrijven...
Maar ik ben een site aan het maken voor een lokale hobbyclub waar ik beheerder ben.

Nu doe ik het misschien met een giga omweg, maar ik heb dus mijn hoofdmenu en daaronder een submenu, in een nieuwe div.
Eigenlijk wil ik het submenu pas laten zien bij hover.
Onder elk item zitten natuurlijk weer andere sub-items.

Het stukje menu ombouwen ligt mij niet zo, ik heb me er een dag in verdiept, maar is niet aan mij weggelegd jammergenoeg, dus probeer ik het zo, wat naar mijn inzien zou moeten werken.

Code:
   <div id="menu" class="container">
      {menu number_of_levels="1"}
   </div>
   <div id="menu2bg" class="container">
      <div id="menu2">
      {menu number_of_levels="1" start_level="2"}
      </div>
   </div>


Ik heb het al geprobeerd in de CSS met hover en "display:...."
Maar dat werkt natuurlijk niet, omdat het submenu er al keihard staat in een nieuwe div, is mijn benadering.

Is dit anders op te lossen?
Of zal ik toch echt het menu om moeten bouwen?

Alvast dank voor reacties.

Mvrgr Rienko


Last edited by Rienko on Fri Mar 15, 2013 11:12 am, edited 3 times in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Wed Mar 13, 2013 5:05 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3108
Location: The Netherlands
Wat jij wilt moet gewoon mogelijk zijn, maar wat jij doet werkt niet.

start-level=2 betekent volgens mij dat hij het enkel het submenu van de huidige pagina toont.

Wat jij wilt maken is eigenlijk een menu met submenu's, waarbij die submenu's allemaal op de zelfde positie staan. Ik denk dat dat je uitgangspunt moet zijn;

Gewoon een menu opbouwen met

Code:
<ul>
  <li><a>home</a>
    <ul>
      <li><a>home-sub-1</a></li>
      <li><a>home-sub-2</a></li>
     </ul>
   </li>
</ul>


En dan met css proberen de ul li ul absoluut te positioneren. Op de plek die jij wenst uiteraard.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Wed Mar 13, 2013 7:38 pm 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
Duidelijk, dat idee had ik dus al.
Dus ik zal toch een menu moeten maken/aanpassen.
Maar zoals ik zei snap ik het stukje menu maken in cmsms niet, omdat er zoveel kreten tussen staan etc.
Ik wil nml niet een keihard menu hebben, maar wil 'm wel werkend via menu manager hebben, omdat ik simpel wil kunnen wisselen/toevoegen met pagina's.

Ik zal 's kijken of ik toch het minimal menu kan gebruiken en die via CSS kan gaan stylen.
Momenteel blijven de child-pagina's allemaal staan.

Net ff pauze gehad, gegeten etc, ff frisse blik er op werpen.

Als er nog pointers/tips/hints zijn over het stukje menu aanpassen hoor ik dat graag.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Wed Mar 13, 2013 11:26 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 871
Location: Deventer, Netherlands
De standaard menu template (minimal en simple soieso) genereert een redelijk standaard menu in een lijst.

Met alleen maar dit in je sjabloon:
{menu}

zal de output ongeveer zijn wat velden liet zien.

Je hoeft dus eigenlijk niets te veranderen aan de menutemplate.

Het stukje css wat je nodig hebt om het submenu te verbergen is ongeveer dit: (stel dat het menu in een div met id 'menu' staat)

Code:
#menu ul li ul {
display: none;
}

#menu ul li:hover ul {
display: block;
}

_________________
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Wed Mar 13, 2013 11:35 pm 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
Hmmmm, dat lijkt wel erg makkelijk zo ja :)
Ik zal 't 's proberen.

Als je 't niet erg vindt heb ik je uitgenodigd voor msn (lordfiro).
Je lijkt me nml wel een erg handig iemand met dit soort dingen, kan ik misschien nog wat vraagjes tussendoor stellen, mocht 't niet lukken :)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Thu Mar 14, 2013 7:43 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3108
Location: The Netherlands
li:hover werkt niet in alle browsers goed.

Persoonlijk gebruik ik meestal superfish http://users.tpg.com.au/j_birch/plugins/superfish/ in combinatie met jQuery. Uiteraard werkt dat ook niet als bezoekers Javascript uitschakelen, maar daar houdt ik dan maar geen rekening mee.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Thu Mar 14, 2013 8:30 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 871
Location: Deventer, Netherlands
@velden

li:hover werkt al vanaf IE7

Als je nu nog IE6 wilt blijven ondersteunen, ben je meer tijd kwijt met maken van hacks dan met de website zelf.

_________________
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Thu Mar 14, 2013 8:51 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3108
Location: The Netherlands
Kan kloppen inderdaad.

Ik bedoelde eigenlijk ook iets anders: sommige browsers (of misschien in sommige situaties) 'verliest de li zijn hover' wanneer je naar het submenu navigeert met de muis, waardoor het weer inklapt voordat je er 'bent'. Geweldig irritant natuurlijk en dat gebeurt ook met IE > 6.

Gezien het feit dat OP een submenu op een 'heel' andere plek gaat zetten dan het hoofdmenu, lijkt me de kans hierop best groot.

Vorige week nog vraag over gehad en zelf geconstateerd op een test-site. Met superfish werkt het goed (wel JS).


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Thu Mar 14, 2013 10:18 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 871
Location: Deventer, Netherlands
Ikzelf pas ook vaak superfish toe aan de menu's
Werkt inderdaad prima..en tegenwoordig hebben de meesten toch wel javascript aan staan.

Het probleem met het 'open blijven' van de ul, heb ik nog niet meegemaakt.
Heeft dat niet te maken met een vaste hoogte van de 'li' zonder overflow?

De 'ul' (het submenu) bevind zich namelijk volledig in de 'li', dus bij het hoveren van de ul, hover je nog steeds de li (als je begrijpt wat ik bedoel)

_________________
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Thu Mar 14, 2013 8:05 pm 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
Mijn ervaring was, want het hoveren heb ik wel voorelkaar gekregen, dat ik bij hover alleen de subpagina's van de huidige pagina te zien kreeg.
Dan heb ik daar waarschijnlijk het verkeerde deel van de menu-list op hover gezet? om het zo maar te zeggen...

Ik heb iig wel menu2 in menu1 gezet, zegmaar, voordat de div van id"menu" wordt afgesloten roep ik een nieuwe div aan, met id="menu2".
Wat mijn naar mijn mening al de nodige problemen daar uit de weg zou moeten ruimen.

Ik zal morgen weer even verder met de site, zien dat ik dit goed krijg.
Post ik morgen, mocht ik er nog niet uit komen, wel weer ff wat code en vooral css, dat helpt wat makkelijker dacht ik.

Om misschien iets beter te zien wat ik heb en wat ik bedoel zal ik de link vd site ook even posten:
DHC Drachten

Let wel dat de knop home niet werkt, dan gaat 'ie naar de oude pagina (niet lachen a.u.b., niet mijn creatie ;D)

Iniedergeval al heel erg bedankt tot dusver.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Thu Mar 14, 2013 11:56 pm 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
@Tim,
Ik begrijp het iig niet :)
Zoals jij 't zegt lijkt 't ook of jij bedoelt dat ul het submenu is en li het mainmenu ;)
Dat dacht ik nml ff, maar volgens mij weet jij wel beter dan dat.
Je bedoelt dat de ul van het submenu zich in de li bevindt?
Dat is dus bij mij niet het geval.

Ruwweg is mijn opbouw:
<div menu1>
<ul>
<li></li>
</ul>
<div menu2>
<ul>
<li></li>
</ul>
</div>
</div>
menu1 is 1st lvl
menu2 is 2nd lvl

Ik roep momenteel nml het menu 2x aan, 1x voor 1st lvl en 1x voor 2nd lvl.

Toch heb ik 't gevoel dat 't daar fout gaat en 't wordt gezien als 2 losse stukjes, waardoor ik via de 1st lvl css geen invloed kan hebben op de 2nd lvl.

Maar dat is nog steeds een stukje giswerk :)
Ik ga het morgen gewoon proberen met alle bovenstaande info.
Als het niet lukt post ik wel weer :)
Als het wel lukt ook trouwens, voor evt volgenden die hetzelfde ondervinden.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Fri Mar 15, 2013 8:44 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3108
Location: The Netherlands
Je zegt het helemaal juist:

Je moet het menu 1x aanroepen:

{menu number_of_levels='2'} (die number_of_levels) gebruik ik altijd om te voorkomen dat het menu sneuvelt als een gebruiker toch nog probeert een diepere structuur te maken dan voorzien.

Neem het meest eenvoudige menu template en zorg er dan dmv van css voor dat je tweede ul zich als een div gedraagt en een absolute position krijgt:

Code:
ul ul {
  display : none; /* of left : -8000px;  */
  position : absolute;
  width : 100%;
  top : 100px;
 
}

ul li:hover ul {
  display : block;
  position : absolute;
  width : 100%;
  left : 0px;
}


Het is maar een voorbeeld weet niet of het allemaal zo werkt, ligt ook aan je eigen opzet natuurlijk.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Fri Mar 15, 2013 9:46 am 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
Nou...ik ben nu een heel eind gekomen.
2nd level heb ik nu gestyled zoals moet en doet 't bij hover.
Tis idd gewoon simpelweg de 2e ul aanroepen, zo had ik 't nog niet bekeken.
Nu moet ik alleen de 2e ul er nog weer onder krijgen.
De 2nd level popt nu op tussen de 1st level items.

Template:
Code:
</__body>
<a name="main"></a>
<div id="wrapper">
   <div id="header" class="container">
      <div id="logo"><img src="{root_url}
/uploads/dhc/logo.jpg" width="205" height="183" />
      </div>
      <div id="banner">
      <a href="http://www.twitter.com/dhcdrachten" target="_blank"><img id="twitter_logo" src="/uploads/dhc/twitter.png" width="25" height="25" /></a>
      <img id="facebook_logo" src="/uploads/dhc/facebook.png" width="25" height="25" />
      </div>
   </div>
   <div id="menubg" class="container">
      <div id="menu" class="container">
      {menu number_of_levels="2"}
      </div>
   </div>


CSS:
Code:
/* Menu */

#menu {
   height:32px;
   padding: 0 15px;
}
#menu ul {
   margin: 0 0 0 0;
}
#menu li {
   list-style:none;
   float:left;
   background: url(/uploads/dhc/menu_hover.jpg) no-repeat;
}
#menu a {
   float: left;
   height: 20px;
   padding: 6px 30px 6px 30px;
   color: #FFFFFF;
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
}

#menu a:hover {
   background: url(/uploads/dhc/menu_hover.jpg);
}

#menu ul ul {
   display : none;
   width : 100%;
 
}

#menu ul li:hover ul {
   display : block;
   width : 100%;
}

* Menu 2nd level */

#menu ul ul {
   height: 22px;
   margin: 0px 15px;
   padding: 0 0 0 0;
}

#menu ul ul li {
   list-style:none;
   float:left;
   background: url(/uploads/dhc/menu2_hover.jpg) no-repeat;
}
#menu ul ul li a {
   float: left;
   height: 19px;
   padding: 3px 15px 0px 15px;
   color: #5b5b5b;
   font-size: 12px;
   font-weight: normal;
   text-decoration: none;
}
#menu ul ul li a:hover {
   background: url(/uploads/dhc/menu2_hover.jpg);
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 2nd level menu laten zien bij hover in nieuwe div
PostPosted: Fri Mar 15, 2013 10:18 am 
Offline
New Member
New Member

Joined: Tue Mar 12, 2013 9:07 pm
Posts: 9
Ah, zelf al gevonden.
Was niet zo'n grote uitdaging, moest alleen de juiste zoekactie gebruiken op google :P

Code:
#menu ul {
   position: relative;
   margin: 0 0 0 0;
}

#menu ul ul {
   position: absolute;
   top: 32px;
   display : none;
   width : 100%;
}


Bedankt allen voor jullie hulp en pointers! ;)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting