[Hilfe] Fly Out Menu

1

12dima12

Gesperrt
Hallo Community,

ich wollte gerne aus diesem Menu ein Fly Out machen, wie kann ich das am besten tun ? :/

ximg.php


HTML: 
<div class="box">
  <div class="box-heading"><span id="adtext_3" class="adtext">Kategorien</span></div>
  <div class="box-content">
    <ul class="box-category">
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=64">1914 - 1918 (1)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=65">1918 - 1933 (1)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=66">ab 1945 (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=69">Bodenfunde (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=70" class="active">Farben (1)</a>
                        <ul>
                    <li>
                        <a href="http://localhost/opencart/index.php?route=product/category&amp;path=70_72"> - Blau (0)</a>
                      </li>
                    <li>
                        <a href="http://localhost/opencart/index.php?route=product/category&amp;path=70_71"> - Rot (1)</a>
                      </li>
                  </ul>
              </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=60">Fotos &amp; Alben (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=62">Medaillen (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=67">Messer &amp; Dolch (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=63">Münzen &amp; Geldscheine (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=61">Orden &amp; Auszeichnungen (0)</a>
                      </li>
            <li>
                <a href="http://localhost/opencart/index.php?route=product/category&amp;path=68">Schusswaffen (0)</a>
                      </li>
          </ul>
  </div>
</div>
  </div>
 
<div id="content">  <div class="breadcrumb">
        <a href="http://localhost/opencart/index.php?route=common/home">Start</a>
        &nbsp;»&nbsp;<a href="http://localhost/opencart/index.php?route=product/category&amp;path=70">Farben</a>
      </div>
  <h1>Farben</h1>
      <h2>Suche verfeinern</h2>
  <div class="category-list">
        <ul>
            <li><a href="http://localhost/opencart/index.php?route=product/category&amp;path=70_72">Blau (0)</a></li>
            <li><a href="http://localhost/opencart/index.php?route=product/category&amp;path=70_71">Rot (1)</a></li>
          </ul>
      </div>
        </div>


Das ist der CSS Code
Code: 
/* box */
.box {
	margin-bottom: 20px;
	margin-top: 30px;
	margin-left: -10px;
}
.box .box-heading {
	-webkit-border-radius: 7px 7px 0px 0px;
	-moz-border-radius: 7px 7px 0px 0px;
	-khtml-border-radius: 7px 7px 0px 0px;
	border-radius: 7px 7px 0px 0px;
	border: 1px solid #DBDEE1;
	background: url('../image/background.png') repeat-x;
	padding: 8px 10px 7px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	color: #333;
}
.box .box-content {
	background: #FFFFFF;
	-webkit-border-radius: 0px 0px 7px 7px;
	-moz-border-radius: 0px 0px 7px 7px;
	-khtml-border-radius: 0px 0px 7px 7px;
	border-radius: 0px 0px 7px 7px;
	border-left: 1px solid #DBDEE1;
	border-right: 1px solid #DBDEE1;
	border-bottom: 1px solid #DBDEE1;
	padding: 10px;
}
/* box products */
.box-product {
	width: 100%;
	overflow: auto;
}
.box-product > div {
	width: 130px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
	width: 119px;
}
.box-product .image {
	display: block;
	margin-bottom: 0px;
}
.box-product .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.box-product .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
}
.box-product .price {
	display: block;
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.box-product .price-old {
	color: #F00;
	text-decoration: line-through;
}
.box-product .price-new {
	font-weight: bold;
}
.box-product .rating {
	display: block;
	margin-bottom: 4px;
}
/* box category */
ul.box-category, ul.box-category ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.box-category > li:first-child {
	padding: 0px 8px 8px 0px;
}
ul.box-category > li {
	padding: 8px 8px 8px 0px;
}
ul.box-category > li + li {
	border-top: 1px solid #EEEEEE;
}
ul.box-category > li > a {
	text-decoration: none;
	color: #333;
}
ul.box-category > li ul {
	display: none;
}
ul.box-category > li a.active {
	font-weight: bold;
}

ul.box-category> li a{
display: block;
}

ul.box-category> li a:hover{
background-image:url('../image/hover2.png');
height: auto;
width: 160px;
}

ul.box-category > li a.active + ul {
	display: block;
}
ul.box-category > li ul > li {
	padding: 5px 5px 0px 10px;
}
ul.box-category > li ul > li > a {
	text-decoration: none;
	display: block;
}
ul.box-category > li ul > li > a.active {
	font-weight: bold;
}

/* box filter */
ul.box-filter, ul.box-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.box-filter span {
	font-weight: bold;
	border-bottom: 1px solid #EEEEEE;	
	display: block;
	padding-bottom: 5px;
	margin-bottom: 8px;
}
ul.box-filter > li ul {
	padding-bottom: 10px;
}
/* content */
#content .content {
	padding: 10px;
	overflow: auto;
	margin-bottom: 20px;
	border: 1px solid #EEEEEE;
}
#content .content .left {
	float: left;
	width: 49%;
}
#content .content .right {
	float: right;
	width: 49%;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück