You are not logged in.

  • Login

Aufklappbares Menü

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

GFXShorty

Professional

  • "GFXShorty" started this thread

Posts: 179

  • Send private message

1

Wednesday, March 24th 2010, 4:43pm

Aufklappbares Menü

Hallo Leute,

ich suche ein aufklappbares menü wie dieses hier: http://barrierefrei.e-workers.de/workshops/tricks/menues.php, aber wenn möglich nur auf Basis von JAVA damit ich meine eigenen Buttons verwenden kann! Wenn ich eine Kombination aus CSS und Java nehme weiß ich nicht genau wie ich meine eigenen Navi Buttons einfügen kann.. :(...


Grüße

mad

Professional

Posts: 662

  • Send private message

2

Wednesday, March 24th 2010, 5:23pm

1. Meinst du sicher JavaScript => Thread verschieben und Unterschied einprägen
2. Hast du denn eine Lösung in JavaScript+CSS? Dann zeig sie doch mal, denn eigentlich sollte es kein Problem sein, die Buttons durch deine eigenen auszutauschen...

GFXShorty

Professional

  • "GFXShorty" started this thread

Posts: 179

  • Send private message

3

Wednesday, March 24th 2010, 6:11pm

Upss... ja natürlich das meine ich JavaScript!

Dies ist eine Java +CSS Lösung!

Bitteschön

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navi Loesung</title>
<script language="javascript">
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
 
// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();
 
	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
 
}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
 
// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
 
// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
 
// close layer when click-out
document.onclick = mclose; 
</script>
<style type="text/css">
<!--
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}
 
#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}
 
#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none}
 
#sddm li a:hover
{	background: #49A3FF}
 
#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}
 
	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}
 
	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}
-->
</style></head>
 
<body>
<ul id="sddm">
<li>
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()"><img src="../olaf/images/berichte.jpg" /></a>
   <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
       </div>
</li>
<li>
<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()"><img src="../olaf/images/berichte.jpg" /></a>
   <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
       </div>
 
</ul>
</body>
</html>

mad

Professional

Posts: 662

  • Send private message

4

Wednesday, March 24th 2010, 9:04pm

Ok, das sieht ja eigentlich gar nicht schlecht aus. An welchen Stellen sollen denn deine Buttons erscheinen? Eigentlich sollte sich alles über CSS regeln lassen.

Die Bilder auf dem Menü kannst du ja direkt ändern, indem du das Bild berichte.jpg austauschst. Wenn du an den einzelnen Untermenüpunkten noch Bilder haben willst, wird das etwas komplizierter, ist aber auch nicht unmöglich.

Sag erst einmal was du erreichen willst...

venum-lk

Intermediate

Posts: 99

  • Send private message

5

Wednesday, March 24th 2010, 9:17pm

Wie wär s ohne Javascript, also nur mit CSS?

Wenn s dich interessiert, dann schau dir des mal an
(Ich hoff, dass ich nix vergessen hab)

Nutzt hover aus. Damit es im IE auch ohne Probleme funktioniert, klatscht du das in dein Stylesheet
(csshover.htc is als Dateianhang dabei)

Cascading Style Sheets

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* Browserweichen für Body Element (nur für IE-Versionen) */
 * html > body {
    behavior:url("htc/csshover.htc");
}
*>htm body {
    behavior:url("htc/csshover.htc");
}
* html body {
    behavior:url("htc/csshover.htc");
}
*+html body {
    behavior:url("htc/csshover.htc");
}
/* Browserweichen ENDE */


Dann die normalen Anweisungen

Cascading Style Sheets

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#dropdown, #dropdown ul {
list-style-type:none;
margin:0;
padding:0;
}
#dropdown li {
width:190px;
float:left;
}
#dropdown li ul {
display:none;
}
#dropdown li:hover ul {
display:block;
}


Und der HTML-Code dazu

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="dropdown" style="z-index:1;position:absolute;">
              <li>
                <a href="?show=admin">
                  <div class="adminnavi_top">Hauptmen&uuml;</div>
                </a>
                <ul>
                  <li>
                    <a href="?show=admin&mode=home">
                      <div class="adminnavi_ele">Startseite</div>
                    </a>
                  </li>
                  <li>
                    <a href="?show=admin&mode=current">
                      <div class="adminnavi_ele">Aktuelles</div>
                    </a>
                  </li>
                  <li>
                    <a href="?show=admin&mode=management">
                      <div class="adminnavi_ele">Vorstand</div>
                    </a>
                  </li>
                  ...
venum-lk has attached the following file:
  • csshover.zip (1.64 kB - 37 times downloaded - latest: Apr 9th 2012, 8:38am)

This post has been edited 1 times, last edit by "venum-lk" (Mar 25th 2010, 9:08pm) with the following reason: csshover.htc angefügt

GFXShorty

Professional

  • "GFXShorty" started this thread

Posts: 179

  • Send private message

6

Wednesday, March 24th 2010, 10:24pm

Kurz zur Erklärung ich möchte diese Navigation meiner Seite --> http://picfront.de/d/7vDq

so realisieren das beim darüber gehen über z.b. "der Verein" dieser das Rolloverbild lädt und dabei das Aufklappmenü aufgeht!


So soll es bei allen Navi Buttons werden, jeder ist unterschiedlich groß.

LG
Nick

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

7

Thursday, March 25th 2010, 9:05am

Genau das beschreibt dir doch venum.
weitere Css navigationen mit dropdown findest du hier: http://www.cssplay.co.uk/menus/
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

venum-lk

Intermediate

Posts: 99

  • Send private message

8

Thursday, March 25th 2010, 5:53pm

Für den Buttonwechsel beim mouseover

Cascading Style Sheets

 
1
2
3
4
5
6

.adminnavi_top {
background-image: url(../img/normal.png);
}
.adminnavi_top:hover {
background-image: url(../img/hover.png);
}


// EDIT:
Ich hab die csshover.htc bei meinem ersten Beitrag dazugepackt

This post has been edited 1 times, last edit by "venum-lk" (Mar 25th 2010, 9:09pm)

Similar threads

Tagging

Social bookmarks