Menu mit kategorien und Sub-Kategorien erstellen - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Menu mit kategorien und Sub-Kategorien erstellen

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Menu mit kategorien und Sub-Kategorien erstellen

Pages: [1]

geschrieben von uaeconnections am 21.03.2008 - 13:40

hallo zusammen !

ich experementire gerade mit google maps, und bruache eine klaine hilfe dabei, damit ich weiter kommen kann

also es geht darum :

ich habe eine karte erstellt hier ist ein beispiel:

http://www.uaeconnections.com/map_i..../index.php

wie man sieht, sind oben die haupt categories, und links stehen die icons die dazu gehören.. alles läuft wunderbar.

nun ich möcte gerne die oben gezeigten categories in ein menu ordnen,, so wenn man mit dem mouse dadrüber geht, eine sub menu mit ( Sub-categories )erscheint.

ich habe es bis jetzt so gemacht :

in der .js file hier ein link :
http://www.uaeconnections.com/map_i....nctions.js

GEvent.addListener(marker, 'click', focusPoint);
listItemLink.onclick = focusPoint;

pointData.show = function() {
if (!visible) {
document.getElementById(
'sidebar-list').appendChild(listItem);
map.addOverlay(marker);
visible = true;
}
}
pointData.hide = function() {
if (visible) {
document.getElementById(
'sidebar-list').removeChild(listItem);
map.removeOverlay(marker);
visible = false;
}
}
pointData.show();
}

function initializeSortTab(cat) {
var listItem = document.createElement('li');
var listItemLink = listItem.appendChild(
document.createElement('a'));

listItemLink.href = "#";
listItemLink.innerHTML = cat;

listItemLink.onclick = function() {
changeBodyClass('standby', 'loading');

for(id in markers) {
if (markers[id].cat == cat || 'All' == cat)
markers[id].show();
else
markers[id].hide();
}

changeBodyClass('loading', 'standby');
return false;
}
document.getElementById('filters').appendChild(listItem);
}

function handleResize() {
var height = windowHeight()
- document.getElementById('toolbar').offsetHeight - 30;
document.getElementById('map').style.height
= height + 'px';
document.getElementById('sidebar').style.height
= height + 'px';
}

function changeBodyClass(from, to) {
document.body.className =
document.body.className.replace(from, to);
return false;
}

.. dann wird die karte und ihre parameter erstellt : ( auch in der .js file)

function init() {
var cat;

var allTypes = { 'All':[] };

document.getElementById('button-sidebar-hide').onclick =
function() {
return changeBodyClass('sidebar-right', 'nosidebar');
};
document.getElementById('button-sidebar-show').onclick =
function() {
return changeBodyClass('nosidebar', 'sidebar-right');
};
handleResize();

map = new GMap2(document.getElementById("map"));
....
.....

for(id in markers) {
initializePoint(markers[id]);
allTypes[markers[id].cat] = true;
}

for(cat in allTypes) {
initializeSortTab(cat);
}

changeBodyClass('loading', 'standby');
}

window.onresize = handleResize;

dann werden die .js file und .css und natürlich die " categories listing" in der index.php abgerufen :

<body class="sidebar-right loading">

<div id="toolbar">
<h1>UAE Connections Locater</h1>
<ul id="filters">
</ul>
<ul id="sidebar-controls">
<li><a href="#" id="button-sidebar-hide">
Hide Listing</a></li>
<li><a href="#" id="button-sidebar-show">
Show Listing</a></li>
</ul>
</div>

<div id="content">
<div id="map-wrapper">
<div id="map"></div>
</div>
<div id="sidebar">
<ul id="sidebar-list">
</ul>
</div>
</div>
<div id="alert">
<p>Daten werden geladen ...</p>
</div>
</body>

dazu gibt es auch die style.css datei :

http://www.uaeconnections.com/map_i..../style.css

nun wo muss ich was ändern um eine menu zu erstellen.. ich habe es soweit geschafft, und weiss nicht weiter, und daswegen brauche ich hilfe ,, ich habe ein paar menus auf der website gesehen die perfekt passen, nur ich weiss nicht genau was ich was ändern sollte..

mir wurde reichen, eine start hilfe nur um zu wissen wo ich was ändern sollte um so ein menu mit sub menu zu bekommen..

ich danke euch im voraus ..

geschrieben von Martin am 26.03.2008 - 09:34

Ave,

ich kenne da vielleicht etwas was dir weiterhilft. http://www.brainjar.com/dhtml/menubar/
Schau mal rein. Das ist ein dHTML Menü welches als Grundlage eine Liste <ul><li></li></ul> benutzt um ein Drop-Down Menu draus zu machen.

mfg martin