uitklapbaar menu zoals categorieen.

LazyTiger · Bericht door **LazyTiger** » 13 feb 2004, 15:40

okee, ik wil iets doen aan mijn menu en nu leek het mij wel origineel (denk ik) om een menu te maken dat uitklapt zoals bij de categorieen.
dus als je op "meer" drukt, dat hij dan net uitklapt zoals een categorie.
er komt dan dus een nieuwe regel onder waarbij de overige menu items staan.

volgens mij bestaat dit nog niet... of wel?

maar het belangrijkste:
iemand enig idee hoe ik dat kan maken?

WebSiteNet · Bericht door **WebSiteNet** » 13 feb 2004, 16:26

Je kan hier wat mee. Maar een beetje javascript kan je het met een knop doen.

Code: Selecteer alles

<a href="#" onclick="document.getElementById('div55').style.display='none';">Dicht</a> -
<a href="#" onclick="document.getElementById('div55').style.display='';">Open</a>
<div id="div55" style="display: none;">
ghgvgvggc
</div>

// edit: Ik was eerder

mosymuis · Bericht door **mosymuis** » 13 feb 2004, 16:26

P.T. schreef:volgens mij bestaat dit nog niet... of wel?

Honderden javascriptjes die dit kunnen, om nog maar niet te beginnen over flash.

http://www.javascripts.com
http://www.hotscripts.com
http://www.dynamicdrive.com

LazyTiger · Bericht door **LazyTiger** » 13 feb 2004, 16:28

dankje websitenet. ik zal het eens aankijken.

@ mosymuis.
ik bedoelde op een phpbb forum

daar heb ik nog nooit zoiets gezien.

flash... nee dankje, dat moet ik nog bestuderen.

WebSiteNet · Bericht door **WebSiteNet** » 13 feb 2004, 16:33

Ik heb ff een toggle script gemaakt:

Code: Selecteer alles

<script type="text/javascript">
<!--
function menu_toggle(id)
{
    if( document.getElementById(id).style.display == '')
	{
	    document.getElementById(id).style.display = 'none';
	}
	else
	{
	    document.getElementById(id).style.display = '';
	}
	return true;
}

-->
</script>

<a href="#" onclick="menu_toggle('div55');">toggle</a>
<div id="div55" style="display: none;">
ghgvgvggc
</div>

LazyTiger · Bericht door **LazyTiger** » 13 feb 2004, 16:50

die wou ik net vragen

thanx.
ik heb hem even om mijn testforum gezet:
http://members.lycos.nl/mpc1986/mfo/phpBB2/index.php

mosymuis · Bericht door **mosymuis** » 13 feb 2004, 17:03

P.T. schreef:@ mosymuis.
ik bedoelde op een phpbb forum
daar heb ik nog nooit zoiets gezien.

Wat maakt het uit of je het op een forum of website gebruikt?

En het wordt wel degelijk gebruikt hoor... ik heb een uitklap script voor mijn extra smilies in mijn posting.php, Stef's http://www.computer-cafe.nl gebruikt het op de zoekpagina en Jildert's http://www.athelas.nl.tt gebruikt het o.a. voor de statestieken en linkpartners. Hier gaf ik ook een dergelijk script (achteraf gezien ernstig oversized) wat de Quick Reply deed uitklappen.

Ik begon ermee en nu gaan steeds meer forums het gebruiken. Het originele is er nu wel vanaf.

LazyTiger · Bericht door **LazyTiger** » 13 feb 2004, 17:05

dat bedoelde ik ook niet helemaal..

ten eerste, ik streef een beetje naar originaliteit. vandaar.

ten tweede, ik bedoelde echt een phpbbforum met zo'n menu, niet met statistieken, niet met zoeken of zo. :thumb:

mosymuis · Bericht door **mosymuis** » 13 feb 2004, 17:07

P.T. schreef:ten tweede, ik bedoelde echt een phpbbforum met zo'n menu, niet met statistieken, niet met zoeken of zo. :thumb:

Ja ok, maar of je nu het menu of de statestieken uitklapt maakt weinig verschil, je bereikt hetzelfde effect.

LazyTiger · Bericht door **LazyTiger** » 13 feb 2004, 17:17

dat is waar...
maar ach... komt allemaal wel goed.
en ik heb het effect bij athelas en CC wel gezien, of ik daardoor op dit idee ben gekomen weet ik niet, maar ik denk het wel.
al wou ik al langer iets met mijn menu.
(ergens heb ik daarover een topic staan --> 2 menu's)

Jivisstudios · Bericht door **Jivisstudios** » 16 feb 2004, 14:42

Als je het met Flash doet is het wel orgineel

LazyTiger · Bericht door **LazyTiger** » 16 feb 2004, 14:44

ik heb ondertussen heel het menu in elkaar gedrukt tot 1 regel.

Muiter · Bericht door **Muiter** » 28 jul 2005, 12:04

Dit script heb ik geplaatst om mijn menu te kunnen inklappen maar het werkt nog niet helemaal zoals ik wil.
Standaard moet het menu te zien zijn, dat is nu niet het geval en het tweede probleempje is dat de stand (open/dicht) niet word meegenomen naar de volgende pagina, bv viewtopic.

Is dit aan te passen? Of gaat dat beter met dit script?

Goed script verder :thumb:

Stef · Bericht door **Stef** » 28 jul 2005, 12:13

Had dit niet in je eigen topic gekunt?

Maar goed, we hebben er pas meer aan als je de code laat zien.

Muiter · Bericht door **Muiter** » 28 jul 2005, 12:19

Stef schreef:Had dit niet in je eigen topic gekunt?

Deze leek mij logischer. Alles een beetje bij elkaar houden.

Stef schreef:Maar goed, we hebben er pas meer aan als je de code laat zien.

Code: Selecteer alles

<table width="100%" cellspacing="0" cellpadding="3" border="0"> 
         <tr> 
         	<td align="left" width="100%"><a href="{U_PORTAL}"><img src="templates/modelautoforum/images/logos/modelautoforumnl.gif" border="0" alt="{L_INDEX}" vspace="1" /></a><br /><a href="#" onclick="menu_toggle('div55');">Menu</a></td>
			<td align="right" width="100%"><img src="{LOGO_IMG}" border="0" vspace="1" /></td>
         </tr> 
</table>
 
</td> 
</tr> 

<tr> 
<td align="center" width="135" valign="top">


<div id="div55" style="display: none;"> 

<table width="150" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
    <td class="catHead" align="center" height="25"><span class="genmed"><b>{USER_NAME}</b></span></td>
  </tr>
  <tr>
    <td class="row1" align="center" width="100%">{USER_AVATAR}<br /> 
	<!-- BEGIN switch_user_logged_out -->
	<form method="post" action="{U_PORTAL}"><span class="forumlink" style="margin-left: 2px; font-size: 11px">{L_SELECT_LANG}: </span>{LANGUAGE_SELECT}&nbsp;
	<input type="submit" class="mainoption" name="cangenow" value="{L_CHANGE_NOW}" />
	</form>
	<a href="{U_REGISTER}" class="mainmenu" alt="{L_REGISTER}">{L_REGISTER}</a><br />
	<!-- END switch_user_logged_out -->
	<a href="{U_LOGIN_LOGOUT}" class="mainmenu" alt="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><br />
	<!-- BEGIN switch_user_logged_out -->
	<a href="{U_SEND_PASSWORD}" class="mainmenu">{L_SEND_PASSWORD}</a><br />
	<!-- END switch_user_logged_out -->
	<!-- BEGIN switch_user_logged_in -->
	<a href="{U_ONLINE_STATUS}" class="mainmenu" alt="{L_VIEWONLINE}">{L_VIEWONLINE}</a><br />
    <a href="{U_PROFILE}" class="mainmenu" alt="{L_PROFILE}">{L_PROFILE}</a><br />
	<a href="{U_PRIVATEMSGS}" class="mainmenu" alt="{PRIVATE_MESSAGE_INFO}">{PRIVATE_MESSAGE_INFO}</a><br />
	<a href="{U_BOOKMARKS}" class="mainmenu" alt="{L_BOOKMARKS}">{L_BOOKMARKS}</a><br />
	<a href="{U_SEARCH_FLAGS}" class="mainmenu" alt="{L_SEARCH_FLAGS}">{L_SEARCH_FLAGS}</a><br />
	<a href="{U_NOTES}" class="mainmenu" alt="{L_NOTES}">{L_NOTES}</a><br />
	<!-- END switch_user_logged_in -->
    </span></td>
  </tr>
</table>	
<br />
<table width="150" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr> 
	<td class="catHead" height="25"><span class="genmed"><b>Menu</b></span></td>
  </tr>  
  <tr> 
	<td class="row1" align="left"><span class="mainmenu">
	<b>Hot Links</b><br />
	<a href="{U_PORTAL}" class="mainmenu" alt="{L_HOME}">{L_HOME}</a><br />
	<a href="{U_INDEX}" class="mainmenu" alt="{L_FORUM}">{L_FORUM}</a><br />
	<a href="{U_CATALOG}" class="mainmenu" alt="{L_CATALOG}"/>{L_CATALOG}</a><br />
	<a href="{U_KB}" class="mainmenu" alt="{L_KB}">{L_KB}</a><br />
	<a href="{U_SHOUTBOX_MAX}" class="mainmenu" alt="{L_SHOUTBOX}">{L_SHOUTBOX}</a><br />
	<!-- BEGIN switch_user_is_mod --> 
	<a href="{U_REPORTS}" class="mainmenu" alt="{L_REPORTS}">{L_REPORTS}</a><br />
	<!-- END user_is_mod -->
	<br />
	<b>Modelautoforum.nl</b><br />
	<a href="template.php?page=1" class="mainmenu">Doelstelling</a><br />
	Nieuwsbrief<br />
	<a href="template.php?page=2" class="mainmenu">Vrienden (donateurs)</a><br />
	<a href="template.php?page=4" class="mainmenu">Partners</a><br />
	<a href="template.php?page=3" class="mainmenu">Geschiedenis</a><br />
	<br />
	<b>Forum</b><br />
	<a href="{U_INDEX}" class="mainmenu" alt="{L_FORUM}">{L_FORUM}</a><br />
	<a href="{U_SEARCH}" class="mainmenu" alt="{L_SEARCH}">{L_SEARCH}</a><br />
    <a href="{U_FAQ}" class="mainmenu" alt="{L_FAQ}">{L_FAQ}</a><br />
    <a href="{U_BOARD_RULES}" class="mainmenu" alt="{L_BOARD_RULES}">{L_BOARD_RULES}</a><br />
    <a href="{U_LINKS}" class="mainmenu" alt="{L_LINKS}">{L_LINKS}</a><br />
    <a href="{U_MEMBERLIST}" class="mainmenu" alt="{L_MEMBERLIST}">{L_MEMBERLIST}</a><br />
    <a href="{U_GROUP_CP}" class="mainmenu" alt="{L_USERGROUPS}">{L_USERGROUPS}</a><br />
    <a href="{U_STATSTICS}" class="mainmenu" alt="{L_STATSTICS}">{L_STATSTICS}</a><br />
    <br />
	<b>Bibliotheek</b><br />
	<a href="{U_CATALOG}" class="mainmenu" alt="{L_CATALOG}"/>{L_CATALOG}</a><br />
    <a href="{U_CATALOG_NEW}" class="mainmenu" alt="{L_CATALOG_NEW}"/>{L_CATALOG_NEW}</a><br />
	<a href="{U_KB}" class="mainmenu" alt="{L_KB}">{L_KB}</a><br />
	Ombouwprojecten<br />
	Tips&Tricks<br />
	<a href="{U_ADDRESSES}" class="mainmenu" alt="{L_ADDRESSES}"/>{L_ADDRESSES}</a><br />
    <a href="{U_ADDRESSES_NEW}" class="mainmenu" alt="{L_ADDRESSES_NEW}"/>{L_ADDRESSES_NEW}</a><br />
	<br />
	<b>Evenementen</b><br />
	<a href="{U_CALENDAR}" class="mainmenu" alt="{L_CALENDAR}"/>{L_CALENDAR}</a><br />
    <a href="{U_CALENDAR}?&action=Cal_add_event" class="mainmenu" alt="{L_CALENDAR}"/>{L_CAL_NEW}</a><br />
	<br />
	<b>Newsfeeds</b><br />
	<a href="{U_TOPICS_ANYWHERE}" class="mainmenu" alt="{L_TOPICS_ANYWHERE}">{L_TOPICS_ANYWHERE}</a><br />
	<a href="template.php?page=5" class="mainmenu">RSS Feed</a><br />
	<br />
	<b>Overige</b><br />
	Forummodel<br />
    <a href="{U_FORUM_TOUR}" class="mainmenu" alt="{L_FORUM_TOUR}">{L_FORUM_TOUR}</a><br />
    <a href="{U_GUESTBOOK}" class="mainmenu" alt="{L_GUESTBOOK}">{L_GUESTBOOK}</a><br />
    <br />
    <b>Contact</b><br />
	<a href="form.php" class="mainmenu" target="_form" onClick="window.open('form.php','_form','height=405,resizable=yes,scrollbars=no,width=430')">Stichting</a><br />
	<a href="form.php" class="mainmenu" target="_form" onClick="window.open('form.php','_form','height=405,resizable=yes,scrollbars=no,width=430')">Forumbeheerder</a><br />
	<a href="{U_STAFF}" class="mainmenu" alt="{L_STAFF}">{L_STAFF}</a><br />
	</span></td>
			</tr>
			</table>
			
		<br />		
			
		<table width="150" cellpadding="3" cellspacing="1" border="0" class="forumline">
		   <tr>
			<td class="catHead" height="25"><span class="genmed"><b>Merchandising</b></span></td>
		   </tr>
		   <tr>			
			<td class="row1" align="left"><span class="mainmenu">
			<img src="http://www.muiter.nl/modelcars/images/bmw645ci.jpg" width="138" border="0" vspace="1" /></a></span></td>			
		   </tr>
		  </table>	
		  
		<br />

<script language="JavaScript" type="text/javascript">
		  <!--
		  function checkSearch()
		  {
			if (document.search_block.search_engine.value == 'google')
			{
				window.open('http://www.google.com/search?q=' + document.search_block.search_keywords.value, '_google', '');
				return false;
			}
			else
			{
				return true;
			}
		  }
		  //-->
		  </script>
		  <table width="150" cellpadding="3" cellspacing="1" border="0" class="forumline">
		   <tr>
			<td class="catHead" height="25"><span class="genmed"><b>{L_SEARCH}</b></span></td>
		   </tr>
		   <tr>			
			<td class="row1" align="left"><form name="search_block" method="post" action="{U_SEARCH}" onSubmit="return checkSearch()"><span class="gensmall" style="line-height=150%">
			{L_SEARCH}:<br /><input class="post" type="text" name="search_keywords" size="15" /><br />{L_SEARCH_AT}:<br /><select class="post" name="search_engine" /><option value="site">Modelautoforum.nl</option><option value="google">Google</option></select><br /><a href="{U_SEARCH}">{L_ADVANCED_SEARCH}</a><br /><br />
			<input type="hidden" name="search_fields" value="all" /><input type="hidden" name="show_results" value="topics" />
			<center><input class="mainoption" type="submit" value="{L_SEARCH}" /></center></span></form></td>
		   </tr>
		  </table>	
		  
		  </div> 
			
<td width="100%" valign="top">

En dat geeft dit resultaat

De code waar het om gaat:

Code: Selecteer alles

<a href="#" onclick="menu_toggle('div55');">Menu</a>

<div id="div55" style="display: none;">

Stef · Bericht door **Stef** » 28 jul 2005, 12:29

Maak eens van display: visible.

Muiter · Bericht door **Muiter** » 28 jul 2005, 12:36

Stef schreef:Maak eens van display: visible.

Ik had net ook het e.e.a. geprobeerd en dat werkt idd. Net zoals 'menu' of 'spook' alles behalve 'none' denk ik.

Nu het volgende punt nog, hoe neem ik de stand van het menu mee naar een andere pagina.

Stef · Bericht door **Stef** » 28 jul 2005, 14:29

Dat is een goede, op dit moment denk ik alleen aan het opslaan in een cookie..

Muiter · Bericht door **Muiter** » 28 jul 2005, 15:31

Stef schreef:Dat is een goede, op dit moment denk ik alleen aan het opslaan in een cookie..

Dat lijkt mij een mooie oplossing maar ik heb daar nog minder verstand van als van php(BB)

Muiter · Bericht door **Muiter** » 30 jul 2005, 21:35

Zou het ook op deze manier kunnen?

Code: Selecteer alles

$_SESSION['showMenu'] = FALSE;

Als dat kan hoe moet ik dat verder uitwerken?

uitklapbaar menu zoals categorieen.

uitklapbaar menu zoals categorieen.

Re: uitklapbaar menu zoals categorieen.