kostenloser Webspace werbefrei: lima-city


Rollout Menü

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    Hallo zusammen,
    ich wollte dieses Menü hier auf meiner Seite einbinden ( die Seite ist gerade nicht online).
    http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

    CSS:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .sidebarmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 180px; /* Main Menu Item widths */
    border-bottom: 1px solid #ccc;
    }
     
    .sidebarmenu ul li{
    position: relative;
    }
    
    /* Top level menu links style */
    .sidebarmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
    }
    
    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
    background-color: #012D58; /*background of tabs (default state)*/
    }
    
    .sidebarmenu ul li a:visited{
    color: white;
    }
    
    .sidebarmenu ul li a:hover{
    background-color: black;
    }
    
    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 170px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    }
    
    .sidebarmenu a.subfolderstyle{
    background: url(right.gif) no-repeat 97% 50%;
    }
    
     
    /* Holly Hack for IE \*/
    * html .sidebarmenu ul li { float: left; height: 1%; }
    * html .sidebarmenu ul li a { height: 1%; }
    /* End */
    
    </style>
    
    <script type="text/javascript">
    
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
    
    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
       ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
      else //else if this is a sub level submenu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)
    
    </script>


    <div class="sidebarmenu">
    <ul id="sidebarmenu1">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>


    Bin sehr anhunglos in der Materie, aber normalerweise beziehe ich mich doch in meinem Html Dokument auf das CSS-Sheet, hier finde ich einen solchen Bezug gar nicht.
    Baue ich diesen dann so: <link rel="stylesheet" href="sidebar.css" type="text/css" media="screen" /> ein, sind zwar die Farben angepasst aber es passiert sonst nichts.

    Dankeschön
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. In deinem ersten Codeschnipsel steckt außer CSS auch Javascript. Wenn Du das in die sidebar.css gepackt hast, wird es natürlich nicht ausgeführt.

    Das Javascript gehört in den <head>-Bereich deiner Seite.

    FF
  4. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    Dankeschön für den Hinweis.
    mein Versuch, die Html und Css durch <link rel="stylesheet" href="sidebar.css" type="text/css" media="screen" /> zu verbinden, ist wohl auch nicht sinnvoll oder?
    Wobei ich dann nicht verstehe, wie die html-seite weiss von welchem stylesheet sie ihre funktionen nehmen soll..

    Beitrag zuletzt geändert: 14.3.2010 11:25:20 von almaran
  5. almaran schrieb:
    Dankeschön für den Hinweis.
    mein Versuch, die Html und Css durch <link rel="stylesheet" href="sidebar.css" type="text/css" media="screen" /> zu verbinden, ist wohl auch nicht sinnvoll oder?
    Wobei ich dann nicht verstehe, wie die html-seite weiss von welchem stylesheet sie ihre funktionen nehmen soll..

    Das Stylesheet per "Link rel=.. href=..." ist schon ok, es macht die Seite für dich übersichtlicher. Letztendlich passiert nichts anderes, als da? beim Aufruf der Seite die Stylesheet.css in das HTML-Dokument eingebunden wird. Der Vorteil ist, daß sie nur einmal geladen werden muß und dann im Browsercache liegt. Dadurch verkürzen sich Ladezeiten. Gleiches gilt für externe, eingebundene Javascripte.

    Kleiner Hinweis: Bindest Du mehrere stylesheet-Dateien in dein Dokument ein, werden sie in der Reihienfolge der Links in das Dokument übernommen. Wenn ein Element mehrfach definiert ist, werden die vorher geladenen Definitionen überschrieben und die zuletzt Eingebundene wirkt.



    FF

    Beitrag zuletzt geändert: 14.3.2010 11:37:15 von fatfreddy
  6. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    Im Moment passiert auf der Seite noch nichts wie ich erwarten,. bzw. wünschen würde...
    wollte gerade mal die html und css datein hochladen um s vorzuführen, nur komme ich grad scheinbar nicht an meinen webspace..

    Css
    /* 
    
    */
    
    body {
    	background: #FFFFFF url('images/background.jpg') repeat-x;  		/* Hintergrundbild das senkrecht wiederholt wird */
    	color: #686864;														/* Schriftfarbe */
    	font: 0.9em 'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif;	/* Schriftgroesse und Schriftart */
    	margin: 0px;														/* Aussenabstand */
    }
    
    p, pre{ 
    	padding: 5px 10px; 		/* Innenabstand */
    	margin: 0px; 			/* Aussenabstand */
    	color: #2E2E3A;			/* Schirftfarbe */
    }
    
    ul { 
    	list-style: square; 	/* Liststyle => Quadrat */
    }
    
    .left { 
    	text-align: left; 		/* Textausrichtung */
    	float: left; 			/* Element umfließen lassen - links */
    	padding-left: 5px;		/* Innenabstand */
    }
    
    .right { 
    	text-align: right;		/* Textausrichtung */
    }
    
    /* ----------------------------------------- */
    
    #ram { 	
    	background: url('images/mitte.jpg') repeat-y;		/* Hintergrundbild das senkrecht wiederholt wird */
    	width: 752px;										/* Bereit des Div-Elements */
    	margin: 0px auto;									/* Aussenabstand - durch auto = mittige Ausrichtung */
    }
    
    #header {
    	background: url('images/header_p.jpg') repeat-y;		/* Hintergrundbild das senkrecht wiederholt wird */
    	width: 752px;										/* Bereit des Div-Elements */
    	height: 142px;										/* Hoehe des Div-Elements */
    	margin: 0px;										/* Aussenabstand */
    	padding: 0px;										/* Innenabstand */
    }
    
    #content {		
    	width: 550px;										/* Bereit des Div-Elements */
    	padding: 10px 15px 15px 35px;						/* Innenabstand */
    	float: left;										/* Element umfließen lassen - links */
    }
    
    #navi{
    	width: 140px;										/* Bereit des Div-Elements */
    	margin: 0px 0px 0px 612px;							/* Aussenabstand */
    	padding: 10px 0px 0px 0px;							/* Innenabstand */
    }
    
    * html #navi{	/* Angabe nur fuer den IE */										
    	margin: 0px 0px 0px 555px;
    }
    
    	#navi ul{
    		list-style: square inside;						/* Liststyle => Quadrat */
    		margin: 0px auto;								/* Aussenabstand */
    		padding: 0px;									/* Innenabstand */
    	}
    
    #footer {
    background: #FFFFFF url('images/footer.jpg') top no-repeat; /* Hintergrundbild das nicht wiederholt wird */
    clear: left; /* hebt float: left; wieder auf*/
    width: 716px; /* Bereit des Div-Elements */
    height: 40px; /* Hoehe des Div-Elements */
    margin: 0px auto; /* Aussenabstand */
    padding: 25px 0px 0px 25px; /* Innenabstand */
    line-height: 36px; /* Zeilenhoehe*/
    text-align: left; /* Textausrichtung */
    color: #969789; /* Textfarbe */
    } 
    
    /* Links
    --------------------------------------------------------------------------- */
    
    A {	/* generelle Formatierung eines Links */
    	color: #B1815C; 									/* Textfarbe */
    	text-decoration: none;								/* Definiert das der Link nicht unterstrichen ist */
    }
    
    A:visited { /* Besuchter Link */
    	color: #B18832;  									/* Textfarbe */
    	text-decoration: bold;							/* Definiert dass der Link unterstrichen ist */
    }
    
    A:hover, A:active {	/* Aktiver Link & wenn man mit der Maus drueber faehrt */
    	color: #B1625C;  									/* Textfarbe */
    	text-decoration: underline;							/* Definiert dass der Link unterstrichen ist */
    }
    
    /* headlines
    --------------------------------------------------------------------------- */
    h1{
    	color: #C6C7BF;										/* Textfarbe */
    	text-align: left; 									/* Textausrichtung */
    	padding: 0 0px 5px 5px;								/* Innenabstand */
    	font: Normal 2.7em verdana, tahoma, sans-serif;		/* Schriftgroesse und Schriftart */
    }
    
    h2{
    	color: #B1815C;										/* Textfarbe */
    	text-align: left; 									/* Textausrichtung */
    	padding: 0 5px 5px 5px;								/* Innenabstand */
    	font: normal 1.6em;									/* Schriftgroesse und Schriftart */
    }
    
    h3{
    	color: #C29C7E;										/* Textfarbe */
    	text-align: left;  									/* Textausrichtung */
    	padding: 0 5px 0px 5px;								/* Innenabstand */
    	font-size: 1.4em;									/* Schriftgroesse */
    }
    
    h4{
    	color: #BA7EBA;										/* Textfarbe */
    	text-align: left; 									/* Textausrichtung */	
    	padding: 0 5px 5px 5px;								/* Innenabstand */
    	font-size: 1.3em;									/* Schriftgroesse */
    }
    
    h5{
    	color: #BA7EBA;										/* Textfarbe */
    	text-align: left; 									/* Textausrichtung */	
    	padding: 0 5px 5px 5px;								/* Innenabstand */
    	font-size: 1.3em;									/* Schriftgroesse */
    	
    .suckerdiv ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 50px; /* Width of Menu Items */
    border-bottom: 0px solid #ccc;
    }
    	
    .suckerdiv ul li{
    position: relative;
    }
    	
    /*Sub level menu items */
    .suckerdiv ul li ul{
    position: absolute;
    width: 90px; /*sub menu width*/
    top: 0;
    visibility: hidden;
    }
    
    /* Sub level menu links style */
    .suckerdiv ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: black;
    text-decoration: none;
    background: #FFFFFF;
    padding: 5px 5px;
    border: 0px solid #ccc;
    border-bottom: 0;
    }
    
    .suckerdiv ul li a:visited{
    color: black;
    }
    
    .suckerdiv ul li a:hover{
    background-color: white;
    }
    
    .suckerdiv .subfolderstyle{
    background: url(media/arrow-list.gif) no-repeat center right;
    }
    
    	
    /* Holly Hack for IE \*/
    * html .suckerdiv ul li { float: left; height: 1%; }
    * html .suckerdiv ul li a { height: 1%; }
    /* End */



    Html
    <!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>
    <title>Portfolio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style_test.css" type="text/css" media="screen" />
    
    <script type="text/javascript">
    
    //SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
    		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
    			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
    		else //else if this is a sub level submenu (ul)
    		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
    		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
    		ultags[t].style.visibility="visible"
    		ultags[t].style.display="none"
    		}
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus)
    
    </script>
    
    
    </head>
    <body bgcolor="#FFFFFF">
    
    <div id="ram">
    <div id="header"></div>
    
    <div id="content">
      <h1>Willkommen</h1>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
     <ul>
    <div class="suckerdiv">
    <ul id="suckertree1">
    <li><a href="#">About me</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>
    </ul>
    </div>
    
    
    <div id="footer">Portfolio - M&auml;rz 2010 -	<a href="#top" onClick="self.scrollTo(0, 0); return false;"> top </a></div>
    </div> 
    
    </body>
    </html>


    Die Untermenüs klappen nicht seitlich aus, sondern untereinander.. auch ist es irgendwie egal welche padding werte ich eingebe, ändern tut sich nichts..

    Danke für Hilfe

    Beitrag zuletzt geändert: 14.3.2010 12:26:26 von almaran
  7. a******e

    Funktioniert doch wunderbar.
    Alles was CSS ist kommt zwischen <head> und </head>
    alles was bei HTML steht kommt zwischen <body> und </body>

    <html>
    <head>
    <style type="text/css">


    .sidebarmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 180px; /* Main Menu Item widths */
    border-bottom: 1px solid #ccc;
    }

    .sidebarmenu ul li{
    position: relative;
    }

    /* Top level menu links style */
    .sidebarmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
    }

    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
    background-color: #012D58; /*background of tabs (default state)*/
    }

    .sidebarmenu ul li a:visited{
    color: white;
    }

    .sidebarmenu ul li a:hover{
    background-color: black;
    }

    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 170px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    }

    .sidebarmenu a.subfolderstyle{
    background: url(right.gif) no-repeat 97% 50%;
    }


    /* Holly Hack for IE \*/
    * html .sidebarmenu ul li { float: left; height: 1%; }
    * html .sidebarmenu ul li a { height: 1%; }
    /* End */

    </style>

    <script type="text/javascript">



    var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
    if (ultags[t].parentNode.parentNode.id==menuids) //if this is a first level submenu
    ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
    else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
    for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
    ultags[t].style.visibility="visible"
    ultags[t].style.display="none"
    }
    }
    }

    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)

    </script>


    </head>
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    <div class="sidebarmenu">
    <ul id="sidebarmenu1">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>

    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>

    </body>
    </html>
  8. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    jetz kapier ich gar nix mehr..
    meinst du in das stylesheet oder in die html datei?
  9. a******e

    Habe dir eine PN gesendet. Wenn es weitere Fragen gibt, dann kontaktiere mich
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!