CSS Menü, aufklappbar bei Rollover - Seite 2 @ tutorials.de: Tutorials, Forum & Hilfe

Maik · 23.07.07 11:32

Dann versuch doch die Techniken der beiden Menüs zu vereinen.

Es ist nicht der Sinn dieses Forums, einem User nach seinen Wünschen eine gebrauchsfertige Vorlage zu erstellen, sondern ihm Hilfe zur Selbsthilfe zu leisten.

idolumvisions · 23.07.07 12:13

Das ist klar, ich habe es ja schon selbst veruscht, doch meine Kenntnisse in CCS liegen momentan im Ersatz von Tabellenlayouts.

Ich bekomme das einfach nicht hin, wharscheinlich felht mir einfach das logische Konzept hinter den Menus.

Also es wäre wirklich schön, wenn ihr mir da helfen könnt, denn sonst kann ich mein ganzen Konzept meiner Seite in dem Müll schmeißen.

Maik · 23.07.07 13:56

Das nachfolgende Beispiel erhebt keinen Anspruch auf Vollständigkeit, wie z.B. abgerundete Ecken, oder ähnliches, sondern demonstriert "nur" die Methodik.

Das Modell habe ich ausschliesslich mit DIVs umgesetzt und in den mir zur Verfügung stehenden modernen Browsern (FF, IE7, Mozilla, Netscape, Opera, SeaMonkey) erfolgreich getestet.

Lediglich die Vorgängerversionen des IE7 können damit nichts anfangen, da sie die allgemeine Pseudoklasse div.box:hover nicht unterstützen, mit der die unsichtbare Box .article eingeblendet wird.

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>horizontal-boxes</title>
 
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
 
div.box {
float:left;
background:#ddd;
padding:3px 0 0px 10px;
}
 
div.box div.title {
float:left;
}
 
div.box div.article {
display:none;
}
 
div.box:hover div.article {
display:block;
float:left;
width:350px;
background:#fff;
border:1px solid #ddd;
margin-top:-3px;
}
-->
</style>
 
</head>
<body>
 
<!-- box 1 -->
<div class="box">
     <div class="title">box 1</div>
     <div class="article">
          <h2>article 1</h2>
          <p>with some dummy text to expand the box</p>
     </div>
</div>
<!-- box 2 -->
<div class="box">
     <div class="title">box 2</div>
     <div class="article">
          <h2>article 2</h2>
          <p>with some dummy text to expand the box</p>
          <table border="1" width="100%">
                 <tr><td>tables</td><td>also</td><td>possible</td></tr>
          </table>
     </div>
</div>
<!-- box 3 -->
<div class="box">
     <div class="title">box 3</div>
     <div class="article">
          <h2>article 3</h2>
          <p>with some dummy text to expand the box</p>
     </div>
</div>
 
</body>
</html>

idolumvisions · 23.07.07 14:21

Hey viele Dank, genau so hab ichs mir vorgestellt.

Was passiert dann bei den vorherigen Versionen des IE, hab "leider" schon die 7er Version drauf, kanns somit also nicht testen?

Also nochmals vielen Dank, und mit der Zeit kann ichs vllt auch selbst "entwickeln"

Maik · 23.07.07 14:24

Zitat von idolumvisions

Was passiert dann bei den vorherigen Versionen des IE [...] ?

Nichts, die unsichtbaren Boxen bleiben unsichtbar.

skyt · 22.04.08 02:38

hallo,

Maik, dein Beispiel mit dem nackten Menü-Code hier hat mir sehr geholfen :

Code :

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
ul, li {
  display: inline;
}
 
ul#nav li ul {
  display: none;
}
 
ul#nav li:hover ul {
  display: inline;
}
 
ul#nav li a {
  background: #e3e3e3;
  padding: 5px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

und

Code :

<ul id="nav">
    <li><a href="#">menu 1</a>
             <ul>
                 <li>submenu 1.1</li>
                 <li>submenu 1.2</li>
             </ul>
    </li>
    <li><a href="#">menu 2</a>
             <ul>
                 <li>submenu 2.1</li>
                 <li>submenu 2.2</li>
             </ul>
    </li>
    <li><a href="#">menu 3</a>
             <ul>
                 <li>submenu 3.1</li>
                 <li>submenu 3.2</li>
             </ul>
    </li>
    <li><a href="#">menu 4</a>
             <ul>
                 <li>submenu 4.1</li>
                 <li>submenu 4.2</li>
             </ul>
    </li>
</ul>

dennoch eine Frage, weil ich nicht wüßte, wie ich es mir selbst zusammen basteln könnte :
ich suche einen ebenso nackten Code zu deinem ersten Beispiel-Link http://www.cssplay.co.uk/menus/slide_definition.html
nur ohne all die Farbverläufe (eine einfache Schriftfarbe und Hintergrundfarbe würden mir reichen).

Ich habe es mir versucht aus dem Quelltext zu kopieren, aber da ist zuviel anderes dabei, so daß ich nicht unterscheiden kann, was ich brauche und was nicht - und was ich dann noch weglassen muß, um das Menü schlicht zu halten.
(Wobei mein Hauptproblem weniger die Farben sind, als überhaupt erstmal ein Menü untereinander mit auf- und zugehenden Obermenüs zu finden).

Kannst Du oder jemand anderes mir weiterhelfen ?

Viele Grüße, skyt

Maik · 22.04.08 06:52

Hi,

ich hoffe, dass du dich in dieser "Light-Version" des Original-Quellcodes nun besser zurechtfindest.

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A sliding definition list menu</title>
<meta name="Author" content="Stu Nicholls" />
 
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}
</style>
 
</head>
<body>
    
<div id="dlmenu">
<ul id="menu">
 
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="menu/index.html">DEMOS</a></dt>
    <dd><a href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
    <dd><a href="menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
    <dd><a href="menu/form.html" title="Styling forms">styled form</a></dd>
    <dd><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
 
    <dd><a href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
    <dd><a href="menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
    <dd><a href="menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
    <dd><a href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
    <dd><a href="menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
 
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="index.html">MENUS</a></dt>
    <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
    <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
    <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
    <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
 
    <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
    <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
    <dd><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="layouts/index.html">LAYOUTS</a></dt>
 
    <dd><a href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
    <dd><a href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
    <dd><a href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
    <dd><a href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
    <dd><a href="layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
 
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="mozilla/index.html">MOZILLA</a></dt>
    <dd><a href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
    <dd><a href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
    <dd><a href="mozilla/content.html" title="Using content:">content:</a></dd>
    <dd><a href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
 
    <dd><a href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
    <dd><a href="mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
    <dd><a href="mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
 
</body>
</html>

skyt · 22.04.08 20:07

Vielen lieben und großen Dank, Maik !

Ja, damit kann ich weiterarbeiten

Bisher stieß ich immer nur auf Javascript, hatte zig mal probiert es selbst zu basteln durch kombinieren und ändern anderer Menüs. Gestern war ich dann soweit, daß ich dachte, es geht überhaupt nicht ohne Javascript, bis ich Deinen Link sah...

Bin gespannt, was ich hinbekomme und vielen Dank nochmal, skyt

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

CSS Menü mit Rollover...

Dropdown-Menü mit Rollover

(MX) Menü Rollover net richtig

Rollover Menü ?

menü, das bei rollover rausfährt (via neuem AS)

E-Mail:

Abonnieren Abbestellen