php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 24-02-2010, 13:42
fritzje610
 Registrierter Benutzer
Links : Onlinestatus : fritzje610 ist offline
Registriert seit: Mar 2004
Ort: Nahe der schönen Loreley
Beiträge: 318
fritzje610 ist zur Zeit noch ein unbeschriebenes Blatt
Standard Menu gefunden, aber ein Problem beim umsetzen

Hallo zusammen,

nach längerem Suchen habe ich ein Menü gefunden, das, bis auf eine Kleinigkeit, dem entspricht was ich brauche. Es muss zwar vom Design und anderen Aspekten her noch angepasst werden, aber die Basis stimmt.

Nun mein Problem. Wenn man mit der Maus drüber fährt, blenden sich die Ebenen ein. Soll auch so sein. Wenn ich einen Link anklicke, wird dieser auch entsprechend dargestellt. Auch das soll so sein.
Wenn ich aber nun mit der Maus vom Menü runter gehe, blended sich alles wieder aus. Ziel ist es, dass das Menü "offen" bleibt wenn die Maus runterbewegt wird. So das man immer sieht welcher Menüpunkt aktiv ist.
Ich bin der Held in jscript. Daher post ich mal das was ich habe. Vielleicht kann mir ja jemand weiterhelfen.

Besten Dank im voraus ! ! !


Gruß

Michael


Die Menüstruktur:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>2D-Ausklappmenu</title>

<link rel="stylesheet" type="text/css" href="2d-nav.css">

<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;} 
}
</style>
<![endif]-->
</head>

<body>

<div id="menu">

<ul>
  <li><h2>Titel 1</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii</a></li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

<ul>
  <li><h2>Titel 2</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii</a></li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

<ul>
  <li><h2>Titel 3</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii</a></li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

</div>
</body>
</html>

Das zugehörige css:
Code:
 #menu { width: 80px; background: #eee; } 

    #menu ul { list-style: none; margin: 0; padding: 0; } 

    #menu a, #menu h2 {
      font: bold 11px/16px arial, helvetica, sans-serif;
      display: block;
      border-width: 1px; border-style: solid; border-color: #ccc #888
    #555 #bbb;
      margin: 0; padding: 2px 3px; }

    #menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase;
    } 

    #menu a { color: #000; background: #efefef; text-decoration: none; } 

    #menu a:hover { color: #a00; background: #fff; } 
    
    #menu a:active { color: #f00; background: #00f; } 
    
    
    
    
     #menu li { position: relative; }

    #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }

    div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;} 

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

Und noch das jscript dazu:
Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *Whatever:hover - V1.41.050927 - hover & active
 *------------------------------------------------------------
 *(c) 2005 - Peter Nederlof
 *Peterned - http://www.xs4all.nl/~peterned/
 *License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *Whatever:hover is free software; you can redistribute it and/or
 *modify it under the terms of the GNU Lesser General Public
 *License as published by the Free Software Foundation; either
 *version 2.1 of the License, or (at your option) any later version.
 *
 *Whatever:hover is distributed in the hope that it will be useful,
 *but WITHOUT ANY WARRANTY; without even the implied warranty of
 *MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *Lesser General Public License for more details.
 *
 *Credits and thanks to:
 *Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *howto: body { behavior:url("csshover.htc"); }
 *------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++) 
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}

function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = { 
node:node, type:type, handler:handler 
};
}

function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i]; 
e.node.detachEvent(e.type, e.handler);
}
}

function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
}return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) return [doc.getElementById(identify[1])];

var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all; 
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}return nodes;
}
</script>
__________________
Gruß

Michael

Mit Zitat antworten
  #2 (permalink)  
Alt 24-02-2010, 13:47
streuner
 Registrierter Benutzer
Links : Onlinestatus : streuner ist offline
Registriert seit: Aug 2009
Ort: Lüneburg
Beiträge: 623
streuner ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi.

Hab ich Dich richtig verstanden: du willst ein Menü, dass beim überfahren z.B. ein Submenü einblendet und bei klick auf selbiges, dieses erhalten bleibt (aufgeklappt)? Oder willst du beim überfahren ein Submenü, dass auch beim verlassen des Menüs noch eingeblendet ist? Wenn ja, wann soll es wieder ausgeblendet werden??)?!

mfg streuner
__________________
Erst wenn der letzte FTP Server kostenpflichtig, der letzte GNU-Sourcecode verkauft, der letzte Algorithmus patentiert,
der letzte Netzknoten verkommerzialisert ist, werdet Ihr merken, dass Geld nicht von alleine programmiert.

"Diese Software verdient die 3 großen GGG: --- Gesehen --- Gelacht --- Gelöscht ---"
Mit Zitat antworten
  #3 (permalink)  
Alt 24-02-2010, 14:07
fritzje610
 Registrierter Benutzer
Links : Onlinestatus : fritzje610 ist offline
Registriert seit: Mar 2004
Ort: Nahe der schönen Loreley
Beiträge: 318
fritzje610 ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi,

am besten wäre es folgendermassen:
Man klickt auf einen Titel. Ist dieser mit einem Link versehen, wird dieser Link aufgerufen UND da dazugehörige Untermenü angezeigt. Hat der Titel keinen Link, wird nur das Untermenü angezeigt.
Sollte es noch eine Ebene tiefer gehen, soll es genauso funktionieren, nur dass das Untermenü der aufrufende Punkt ist und nicht der Titel.
Zusammengeklappen soll es beim nächsten Klick auf den Titel oder das Untermenü (je nachdem wo man gerade ist)

Ich hoffe das was halbwegs verständlich und ihr könnt mir helfen.


Gruß

Michael
__________________
Gruß

Michael

Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Menu und Css Problem uedo HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 01-04-2007 15:11
script gefunden aber klappt nicht Freakman Projekthilfe 1 17-05-2006 18:33
PHP Menu Problem arnold PHP Developer Forum 11 02-03-2005 16:39
[Variablen] Keine Daten gefunden PHPmit MYSql! Daten sind aber Vorhanden!!! Sun PHP Developer Forum 14 24-02-2004 07:48
attachments zerschossen - gesucht aber nicht gefunden!!! arkos PHP Developer Forum 3 29-01-2004 10:57

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 23:22 Uhr.