Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag31.01.2010 um 21:09 (UTC)    
Titel: Dropline-Menue

Hallo,

Ich habe im Internet ein sogenanntes Dropline-Menue gefunden. Dies ist eine Art Coolmenue, nur mit dem Unterschied, dass sich Links nicht vertikal, sondern horizontal öffnen.

http://www.cssmenus.co.uk/dropline.html

Am besten hat mir auf dieser Seite das dritte Menue gefallen, und deshalb habe mir auch den Code besorgt, um es in meine Seite einzubauen.

Code:
/* ================================================================
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.cssmenus.co.uk
Copyright (c) 2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* style the outer div to give it width */
#dropline {padding:0; list-style:none; background:url(back.gif); text-align:center; margin:0 auto; font-size:12px; font-family:arial, sans-serif; height:41px; width:1000px; position:absolute; left:0; top:139px;}
#dropline div {padding:0; margin:0 auto; list-style:none; position:absolute; left:-9999px; width:1000px; text-align:center; background:url(trans.gif);}
#dropline table {border-collapse:collapse; font-size:1em; float:left; margin:-1px;}

#dropline ul li {display:inline; margin:0; text-align:left;}
#dropline ul li a {display:inline-block; height:30px; line-height:30px; margin:0; padding:0 10px; background:transparent; font-weight:bold; font-size:11px;}

#dropline li {display:inline; margin:0 -2px; text-align:left;}
#dropline li a {display:inline-block; height:36px; margin:5px 0 0 0;padding:0 25px 0 0; background:url(button.gif) right top; line-height:30px; text-decoration:none; color:#000;}
#dropline li a.sub {background:url(button-arrow.gif) right top;}

html>/**/body #dropline li {display:inline-block; padding:0;}

* html #dropline li a {margin-bottom:-4px; margin-right:3px;}

#dropline li a b {display:block; height:36px; float:left; padding:0 0 0 25px; background:url(button.gif) left top; cursor:pointer;}

#dropline li a:hover {background-position:right bottom; color:#fff;}
#dropline li a:hover b {background-position:left bottom;}

#dropline li:hover > a {background-position:right bottom; color:#fff;}
#dropline li:hover > a b {background-position:left bottom;}

#dropline :hover div {left:0; top:41px;}

#dropline :hover ul li a:hover {text-decoration:underline; color:#800;}


Leider bin ich nicht wirklich in der Lage, den Code so zu gestalten, dass er für den Baukasten kompatibel wird. Deshalb hoffe ich, dass es jemand für mich erledigen könnte.

Ich bedanke mich schon einmal im Voraus!


PS: Falls es hier im Baukasten einen Grundcode für ein Dropline-Menue gibt (wie beim Coolmenue), würde ich mich sehr freuen, wenn ihn jemand hier posten könnte. Ich habe leider keinen solchen gefunden.
______________
Gruß,
Modgar

Beitrag01.02.2010 um 01:58 (UTC)    
Titel:

dir fehlt der hmtl code fürs menü ich denke nich,dass es nur mit css funzt^^
______________
||__Pure-gfx__||
{"..Design your own world.."}
!!!! AUFTRÄGE/WÜNSCHE BITTE NICHT PER PM! Bitte Über das Kontaktformular!!!!
Support gebe ich per PM!



Beitrag01.02.2010 um 16:17 (UTC)    
Titel:

Das habe ich auch schon bemerkt, nur leider ist dieser CSS-Code der einzige, der im ZIP-Ordner enthalten ist...

Kann man denn eigentlich den Code für das Coolmenue so gestalten, dass daraus ein Dropline-Menue wird? Denn eigentlich dürfte darin kein sehr großer Unterschied bestehen...
______________
Gruß,
Modgar

Beitrag01.02.2010 um 19:20 (UTC)    
Titel: Antwort

Hallo,
in dem Ordner, den ich mir runtergeladen habe, waren mehrere Dateien Wink

Ich habe dir eine private Nachricht mit dem richtigem Code geschickt, weil ich nicht weiß, ob ich den Code so öffentlich posten darf.

Liebe Grüße,
Mats[/quote]
Beitrag02.02.2010 um 09:03 (UTC)    
Titel:

im css design funzt es so,

Css code ohne Style Tags

Code:
The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* style the outer div to give it width */
#dropline {padding:0; list-style:none; background:url(back.gif); text-align:center; margin:0 auto; font-size:12px; font-family:arial, sans-serif; height:41px; width:1000px; position:absolute; left:0; top:139px;}
#dropline div {padding:0; margin:0 auto; list-style:none; position:absolute; left:-9999px; width:1000px; text-align:center; background:url(trans.gif);}
#dropline table {border-collapse:collapse; font-size:1em; float:left; margin:-1px;}

#dropline ul li {display:inline; margin:0; text-align:left;}
#dropline ul li a {display:inline-block; height:30px; line-height:30px; margin:0; padding:0 10px; background:transparent; font-weight:bold; font-size:11px;}

#dropline li {display:inline; margin:0 -2px; text-align:left;}
#dropline li a {display:inline-block; height:36px; margin:5px 0 0 0;padding:0 25px 0 0; background:url(button.gif) right top; line-height:30px; text-decoration:none; color:#000;}
#dropline li a.sub {background:url(button-arrow.gif) right top;}

html>/**/body #dropline li {display:inline-block; padding:0;}

* html #dropline li a {margin-bottom:-4px; margin-right:3px;}

#dropline li a b {display:block; height:36px; float:left; padding:0 0 0 25px; background:url(button.gif) left top; cursor:pointer;}

#dropline li a:hover {background-position:right bottom; color:#fff;}
#dropline li a:hover b {background-position:left bottom;}

#dropline li:hover > a {background-position:right bottom; color:#fff;}
#dropline li:hover > a b {background-position:left bottom;}

#dropline :hover div {left:0; top:41px;}

#dropline :hover ul li a:hover {text-decoration:underline; color:#800;}


Text über dem design

Code:
<div id="outer">
   <div id="menuHolder">
      <ul id="dropline">
         <li class="first"><a href="index.html"><b>Home</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul class="blank">
               <li></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="single.html"><b>Single Level</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul class="blank">
               <li></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul>
               <li><a href="#url">Dropdown One</a></li>
               <li><a href="#url">Dropdown Two</a></li>
               <li><a href="#url">Dropdown Three</a></li>
               <li><a href="#url">Dropdown Four</a></li>
               <li><a class="last" href="#url">Dropdown Five</a></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="current"><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul>
               <li><a href="#url">Dropline One</a></li>
               <li class="current_sub"><a href="#url">Dropline Two</a></li>
               <li><a href="#url">Dropline Three</a></li>
               <li><a class="last" href="#url">Dropline Four</a></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul class="right">
               <li><a href="#url">Flyout One</a></li>
               <li><a href="#url">Flyout Two</a></li>
               <li><a href="#url">Flyout Three</a></li>
               <li><a href="#url">Flyout Four</a></li>
               <li><a class="last" href="#url">Flyout Five</a></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="support.html"><b>Support</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul class="blank">
               <li></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="last"><a href="contact.html"><b>Contact</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <div>
            <ul class="blank">
               <li></li>
            </ul>
         </div>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
      </ul>
   </div>
</div>
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de