automatisch menu - Forum

Onbekend Onbekend

30-12-2006 14:58

Hallo naamgenoot!

Dit zou je kunnen dmv lussen leggen..

Thomas

30-12-2006 15:03

ik kan dit doen idd:

while($regel = mysql_fetch_array($mysqlstatement))
{
niveau 1
while($regel2 = mysql_fetch_array($myqslstatement2))
{
niveau 2
while
{
niveau 3
while
{
niveau 4
....
}
}
}
}
allé, ksnap wel dat je zoiets kan doen, maar als je een niet gekend aantal niveau's hebt kun je moeilijk het aantal while-lussen erin steken naar het aantal niveau's toe... snapje...

het moet 100% puur dynamisch zijn.
het zou niet op deze manier kunnen zijn dacht ik...

T

Thomas

30-12-2006 15:19

Nog een Thomas erbij:D

ik snap je niet presies, maar ik heb nog wel een heel mooi html menu voor je...


<html>
<head>
<style type="text/css">
/* Deze stylesheet bepaalt het uitzicht van de menubalk */
/* Dit kun je evt.wijzigen : andere kleuren, ander lettertype, ... */

/* Het uitzicht van het gebruikte lettertype op de menubalk */
div.WinBalk,
div.WinBalk a.WinKnop,
div.menu,
div.menu a.WinItem { 
  font-family: "Arial", verdana, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: normal;
  color: #FFFFFF; }
/* De achtergrondkleur van de bovenste menubalk */
div.WinBalk { 
  background-color: #000000;
  border: 2px solid;
  border-color: #000000 #000000 #000000 #000000;
  padding: 4px 2px 4px 2px;
  text-align: left;}
/* De 'normale' kleur van de tekst op de bovenste menubalk */
div.WinBalk a.WinKnop {
  background-color: transparent;
  border: 1px solid #000000;
  color: #FFFFFF;
  cursor: default;
  left: 0px;
  margin: 1px;
  padding: 2px 6px 2px 6px;
  position: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;}
/* De kleur bij muisover van de tekst op de bovenste menubalk */
div.WinBalk a.WinKnop:hover {
  background-color: #666666;
  border-color: #000000 #000000 #000000 #000000;
  color: #FFFFFF;}
/* De kleur van de actieve (= aangeklikte) tekst op de bovenste menubalk */
div.WinBalk a.WinKnopActive,
div.WinBalk a.WinKnopActive:hover {
  background-color: #666666;
  border-color: #000000 #000000 #000000 #000000;
  color: #FFFFFF;
  left: 1px;
  top: 1px;}
/* De achtergrondkleur van de submenu's */
div.menu {
  background-color: #000000;
  border: 2px solid;
  border-color: #000000 #000000 #000000 #000000;
  left: 0px;
  padding: 0px 1px 1px 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 101;}
/* De 'normale' tekstkleur van de submenu's */
div.menu a.WinItem {
  color: #FFFFFF;
  cursor: default;
  display: block;
  padding: 3px 1em;
  text-decoration: none;
  white-space: nowrap;}
/* Achtergrondkleur en tekstkleur submenu's bij mouseover */
div.menu a.WinItem:hover, div.menu a.WinItemOplichten {
  background-color: #666666;
  color: #FFFFFF;}
div.menu a.WinItem span.WinItemText {}
div.menu a.WinItem span.WinItempijltje {
  margin-right: -.75em;}
div.menu div.WinItemlijntje {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  margin: 4px 2px;}
</style>

<!-- Het script : niets aan wijzigen ! -->
<script language= "JavaScript" type="text/javascript">
function Browser() {var ua,s,i;this.isIE=false;this.isNS=false;this.version=null;
ua = navigator.userAgent;s="MSIE";if((i=ua.indexOf(s))>=0){this.isIE=true;
this.version=parseFloat(ua.substr(i + s.length));return;}s="Netscape6/";
if((i=ua.indexOf(s))>=0){this.isNS=true;this.version=parseFloat(ua.substr(i+s.length));
return;}s="Gecko";if((i=ua.indexOf(s))>=0){this.isNS=true;this.version=6.1;
return;}}var browser=new Browser();var activeButton=null;
if(browser.isIE)document.onmousedown=pageMousedown;
else document.addEventListener("mousedown",pageMousedown,true);
function pageMousedown(event){var el;if(activeButton==null)return;
if(browser.isIE)el=window.event.srcElement;
else el=(event.target.tagName?event.target:event.target.parentNode);
if(el== activeButton)return;
if(getContainerWith(el,"DIV","menu")==null){resetButton(activeButton);activeButton = null;
}}
function buttonClick(event,menuId){var button;
if(browser.isIE)button=window.event.srcElement;
else button=event.currentTarget;button.blur();
if(button.menu==null){button.menu = document.getElementById(menuId);
if(button.menu.isInitialized==null)menuInit(button.menu);}
if(activeButton!=null)resetButton(activeButton);
if(button!=activeButton){depressButton(button);activeButton = button;}
elseactiveButton=null;return false;}
function buttonMouseover(event, menuId){var button;
if(browser.isIE)button=window.event.srcElement;else button=event.currentTarget;
if(activeButton!=null&&activeButton!=button)buttonClick(event, menuId);}
function depressButton(button){var x,y;button.className+=" WinKnopActive";
x=getPageOffsetLeft(button);y=getPageOffsetTop(button)+ button.offsetHeight;
if (browser.isIE){x+=button.offsetParent.clientLeft;
y+=button.offsetParent.clientTop;}
button.menu.style.left=x+"px";button.menu.style.top=y+"px";
button.menu.style.visibility="visible";}
function resetButton(button){removeClassName(button,"WinKnopActive");
if(button.menu!=null){closeSubMenu(button.menu);button.menu.style.visibility="hidden";}}
function menuMouseover(event){var menu;
if(browser.isIE)menu=getContainerWith(window.event.srcElement,"DIV","menu");
else menu=event.currentTarget;if(menu.activeItem!=null)closeSubMenu(menu);}
function WinItemMouseover(event,menuId){var item,menu,x,y;
if(browser.isIE)item=getContainerWith(window.event.srcElement,"A","WinItem");
else item=event.currentTarget;menu=getContainerWith(item,"DIV","menu");
if(menu.activeItem!=null)closeSubMenu(menu);menu.activeItem=item;
item.className+=" WinItemOplichten";
if(item.subMenu==null){item.subMenu=document.getElementById(menuId);
if(item.subMenu.initialized==null)menuInit(item.subMenu);}
x=getPageOffsetLeft(item)+item.offsetWidth;y=getPageOffsetTop(item);var maxX,maxY;
if(browser.isNS){maxX=window.scrollX+window.innerWidth;
maxY=window.scrollY+window.innerHeight;}
if(browser.isIE){maxX=(document.documentElement.scrollLeft!=0? 
document.documentElement.scrollLeft:document.body.scrollLeft)
+(document.documentElement.clientWidth!=0? 
document.documentElement.clientWidth:document.body.clientWidth);
maxY=(document.documentElement.scrollTop!=0? 
document.documentElement.scrollTop:document.body.scrollTop)
+(document.documentElement.clientHeight!=0? 
document.documentElement.clientHeight:document.body.clientHeight);}
maxX-=item.subMenu.offsetWidth;maxY-=item.subMenu.offsetHeight;
if(x>maxX)x=Math.max(0,x-item.offsetWidth-item.subMenu.offsetWidth
+(menu.offsetWidth-item.offsetWidth));y=Math.max(0,Math.min(y, maxY));
item.subMenu.style.left=x+"px";item.subMenu.style.top=y+"px";
item.subMenu.style.visibility="visible";
if(browser.isIE)window.event.cancelBubble=true;else event.stopPropagation();}
function closeSubMenu(menu){if(menu==null||menu.activeItem==null)return;
if(menu.activeItem.subMenu!=null){closeSubMenu(menu.activeItem.subMenu);
menu.activeItem.subMenu.style.visibility="hidden";menu.activeItem.subMenu=null;}
removeClassName(menu.activeItem,"WinItemOplichten");menu.activeItem=null;}
function menuInit(menu){
var itemList,spanList;var textEl,pijltjeEl;var itemWidth;var w,dw;var i,j;
if(browser.isIE){menu.style.lineHeight="2.5ex";
spanList=menu.getElementsByTagName("SPAN");
for(i=0;i< spanList.length; i++)
if(hasClassName(spanList[i],"WinItempijltje")){
spanList[i].style.fontFamily="Webdings";spanList[i].firstChild.nodeValue="4";}}
itemList=menu.getElementsByTagName("A");
if(itemList.length>0)itemWidth=itemList[0].offsetWidth;else return;
for(i=0; i < itemList.length; i++) {
spanList=itemList[i].getElementsByTagName("SPAN")
textEl=null
pijltjeEl = null;
for(j=0; j < spanList.length; j++) {
if(hasClassName(spanList[j],"WinItemText"))textEl=spanList[j];
if(hasClassName(spanList[j],"WinItempijltje"))pijltjeEl=spanList[j];}
if(textEl!=null&&pijltjeEl!=null)
textEl.style.paddingRight=(itemWidth-(textEl.offsetWidth+pijltjeEl.offsetWidth))+"px";}
if (browser.isIE){w=itemList[0].offsetWidth;
itemList[0].style.width=w+"px";dw=itemList[0].offsetWidth-w;w-=dw;
itemList[0].style.width=w+"px";}
menu.initialized=true;}
function getContainerWith(node,tagName,className){
while(node!=null){
if(node.tagName!=null&&node.tagName==tagName&&hasClassName(node,className))
return node;node=node.parentNode;}return node;}
function hasClassName(el,name){
var i,list;list=el.className.split(" ");
for(i=0;i<list.length;i++)if(list[i]==name)return true;return false;}
function removeClassName(el,name){
var i,curList,newList;if(el.className==null)return;
newList=new Array();curList=el.className.split(" ");
for(i=0;i<curList.length;i++)
if(curList[i]!=name)newList.push(curList[i]);el.className=newList.join(" ");}
function getPageOffsetLeft(el){var x;x=el.offsetLeft;
if(el.offsetParent!=null)x+=getPageOffsetLeft(el.offsetParent);return x;}
function getPageOffsetTop(el){var y;y=el.offsetTop;
if(el.offsetParent!=null)y+=getPageOffsetTop(el.offsetParent);return y;}
</script>
</head>

<body>
<div class="WinBalk" style="position:relative;width=100%;">

<!-- Tekst op de menubalk -->

<a class="WinKnop"
    href="#"
    onclick="return buttonClick(event, 'Menu1');"
    onmouseover="buttonMouseover(event, 'Menu1');">
Menu 01
</a>

<a class="WinKnop"
    href="#"
    onclick="return buttonClick(event, 'Menu2');"
    onmouseover="buttonMouseover(event, 'Menu2');">
Menu 02
</a>

<a class="WinKnop"
    href="#"
    onclick="return buttonClick(event, 'Menu3');"
    onmouseover="buttonMouseover(event, 'Menu3');">
Menu 03
</a>

<a class="WinKnop"
    href="#"
    onclick="return buttonClick(event, 'Menu4');"
    onmouseover="buttonMouseover(event, 'Menu4');">
Menu 04
</a>

<a class="WinKnop"
    href="#"
    onclick="return buttonClick(event, 'Menu5');"
    onmouseover="buttonMouseover(event, 'Menu5');">
Menu 05
</a>

<a class="WinKnop"
    href=""
    onclick="return buttonClick(event, 'Menu6');"
    onmouseover="buttonMouseover(event, 'Menu6');"
Menu 06
</a>

<a class="WinKnop"
    href=""
    onclick="return buttonClick(event, 'Menu7');"
    onmouseover="buttonMouseover(event, 'Menu7');"
>Menu 07
</a>

(C) 2006 / 2007 By Thomas Postma


<!-- Hoofd Menu's. -->

<!-- Menu 1 -->

<div id="Menu1" class="menu"
onmouseover="menuMouseover(event)">
Tekst Menu 1
<p>
<a class="WinItem" href="#">Optie 1</a>
<a class="WinItem" href="#">Optie 2</a>
<a class="WinItem" href="#">Optie 3</a>
</div>

<!-- Menu 2 -->

<div id="Menu2" class="menu"
onmouseover="menuMouseover(event)">
Tekst Menu 2
<p>
<a class="WinItem" href="#">Optie 1</a>
<a class="WinItem" href="#">Optie 2</a>
<a class="WinItem" href="#">Optie 3</a>
</div>

<!-- Menu 3 -->

<div id="Menu3" class="menu"
onmouseover="menuMouseover(event)">
Test Menu 3
<p>
<a class="WinItem" href="#">Optie 1</a>
<a class="WinItem" href="#">Optie 2</a>
<a class="WinItem" href="#">Optie 3</a>
</div>

<!-- Menu 4 -->

<div id="Menu4" class="menu"
onmouseover="menuMouseover(event)">
Tekst Menu 4
<p>
<a class="WinItem" href="#">Optie 1</a>
<a class="WinItem" href="#">Optie 2</a>
<a class="WinItem" href="#">Optie 3</a>
</div>

<!-- Menu 5 -->

<div id="Menu5" class="menu"
onmouseover="menuMouseover(event)">
Teskt Menu 5
<p>
<a class="WinItem" href="#">Optie 1</a>
<a class="WinItem" href="#">Optie 2</a>
<a class="WinItem" href="#">Optie 3</a>
</div>

<!-- Menu 6 -->

<div id="=Menu6" class="menu">
onmouseover="menuMouseover(event)">
Tekst Menu 6
<p>
<a class="WinItem" href="#">Optie 1</a>
<a class="WinItem" href="#">Optie 2</a>
<a class="WinItem" href="#">Optie 3</a>
</div>

<!-- Menu Tekst -->

<div id="=Tekst" class="menu">
Menu Tekst
j(C) 2006 / 2007 By Thomas Postma
</div>
</body>
</html>

T

Thomas

30-12-2006 15:24

niet mijn eigen script, ergens vandaan
gehaald en helemaal veranderd

T

Thomas

30-12-2006 15:42

ok nice, maar dit maakt geen gebruik van een database. dus is hij niet echt dynamisch.
ik maak een site voor mijn ouders en ik wil als hij af is daar gene klop meer aan hoeven te doen, dus als ze een nieuw menu-item willen hebben moeten ze het zelf kunnen --> met behulp van database.

dus op uw manier denk ik niet dat het zeer flexibel en dynamisch is.
toch schoon als je het statisch wil houden...

mvg
Thomas