zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Css Menu

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.03.2011, 15:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2011
Beiträge: 12
Chacky11 befindet sich auf einem aufstrebenden Ast
Standard Css Menu

Hallo, also folgendes Problem:

Ich habe via Css ein Menü programmiert, dieses lässt sich via klick auf einen Überpunkt aus und wieder einfahren wodurch weitere Unterpunkte angezeigt werden.

Jedoch möchte ich erreichen, dass jeweils immer nur ein Überpunkt ausgefahren werden kann, und vorher angeklickte Punkte wieder einfahren.

Momentan ist es so, dass sich einfach beide Punkte ausklappen.

Gibt es da eine Möglichkeit ? Vielleicht via Javascript ?

Zur Verdeutlichung hier ein Bild des Menüs in gekürtzter Version:

http://img683.imageshack.us/img683/2650/menuew.jpg

Weiter geht es mit der index.html Datei:


HTML-Code:
<div class="menue">

    <div style="float: left"id="my_menu" class="sdmenu">
      <div>
        <span id="black">Aktuelles</span>
        <a href="http://tools.dynamicdrive.com/imageoptimizer/">Aktuelles</a>
        <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
        <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
        <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
        <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
        <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
      </div>
      <div  class="collapsed">
        <span id="black">Station&auml;re Pflege</span>
        <a href="http://www.dynamicdrive.com/recommendit/">Das Altenheim</a>
        <a href="http://www.dynamicdrive.com/link.htm">Finanzierungsbeispiele</a>
        <a href="http://www.dynamicdrive.com/resources/">Pflegesätze</a>
        <a href="http://www.dynamicdrive.com/resources/">Bilder</a>
      </div>
</div>

Dazu nun die folgende Css:


HTML-Code:
div.sdmenu {
	width: 220px;
	font-family: Myriad;
	font-size: 16px;
	padding-bottom: 0px;
	color: black;
	height:600px;
	
}
#black {color:white;}


div.sdmenu div {
	background:#adb3b7;
	overflow: hidden;
	
}
div.sdmenu div:first-child {
	background:#adb3b7;
	
}
div.sdmenu div.collapsed {
	height: 25px;
	
	width:220px;
}
div.sdmenu div span {
	display: block;
	padding: 7px 12px;
	font-weight: bold;
	color: white;
	cursor: default;
	
	
}
div.sdmenu div.collapsed span {
	
	
}
div.sdmenu div a {
	padding: 5px 30px;
	background:#FF9;
	display: block;
	border-bottom: 0px solid #ddd;
	color: black;
	text-decoration:none;
	border-bottom: 1px solid white;
	
}
div.sdmenu div a.current {
	background : #adb3b7;
}
div.sdmenu div a:hover {
	background:grey;
	color: black;

	text-decoration: none;
}
Ich hoffe auf eure Hilfe und

mfg Chacky
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.03.2011, 18:48
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

<!DOCTYPE HTML>
<html>
<head>
<title>
</title>
<style type=text/css>
.navlist
{
list-style-type: none;
color: darkgray;
background-color: gainsboro;
margin-left: 5px;
}

.active:hover li { display: block; }
.active li { display: none; }


.navcontainer
{
width: 220px;
background-color: gainsboro;
border: 1px gray solid;
}

.navcontainer a
{
color: gray;
background-color: gainsboro;
width: 120px;
display: block;
}

.navcontainer a:visited
{
color: gray;
background-color: gainsboro;
}

.navcontainer a:active
{
color: white;
background-color: gray;
}

.navcontainer a:hover
{
color: white;
background-color: gray;
}
</style>

</head>
<body>

<div class="navcontainer">


<ul class="navlist">

<li class="active"><a href="#" >Item one</a>
<ul>
<li><a href="#">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>
</li>


<li class="active"><a href="#" >Item two</a>
<ul>
<li><a href="#">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>
</li>


<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>


</body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.03.2011, 09:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2011
Beiträge: 12
Chacky11 befindet sich auf einem aufstrebenden Ast
Standard

Das ist zwar schonmal ein Anfang, aber leider nicht genau das was ich suche.

Leider ist mir aufgefallen, dass ich die zugehörige Javascript datei nich mit gepostet habe, hoffe das passt trozdem noch in den Thread.

Im Anhang findet ihr das gesamte Menü als Zip gepackt.

Also nochmal zu den Funktionen, es sollte sich erst bei einem klick auf den Oberpunkt ausklappen und nicht wie im Beispiel über mir mit einem hover Effekt.

Mit freundlichen Grüßen
Chacky
Angehängte Dateien
Dateityp: zip Daten.zip (20,1 KB, 3x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 17.03.2011, 09:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2011
Beiträge: 12
Chacky11 befindet sich auf einem aufstrebenden Ast
Standard

AAh ich hab es hinbekommen, es benötigte nur eine kleine Einstellung =)


Code:
myMenu.oneSmOnly = false;
Vielleich wäre es noch ganz schön wenn man bei den Überpunkten auch nen hover effekt einbringen könnte, doch leider sind diese keine links mh.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.03.2011, 10:52
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Du kannst auch anderen Elementen wie z.B. li einen hovereffekt mitgeben, nur ältere IE's verstehen das nicht.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Kindelement eines ausgeblendeten Elternelementes ansprechen wandler CSS 7 19.06.2010 02:32
Horizontales menü Nach unten aufklappbar franjob CSS 3 24.06.2009 14:51
Css Tree Fly Menu thiagojonas CSS 7 30.12.2008 21:10
Problem mit vertikaler Navigation Krissie CSS 0 15.08.2007 13:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:56 Uhr.