Hallo Community,
ich wollte gerne aus diesem Menu ein Fly Out machen, wie kann ich das am besten tun ? :/
Das ist der CSS Code
ich wollte gerne aus diesem Menu ein Fly Out machen, wie kann ich das am besten tun ? :/
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&path=64">1914 - 1918 (1)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=65">1918 - 1933 (1)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=66">ab 1945 (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=69">Bodenfunde (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=70" class="active">Farben (1)</a>
<ul>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=70_72"> - Blau (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=70_71"> - Rot (1)</a>
</li>
</ul>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=60">Fotos & Alben (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=62">Medaillen (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=67">Messer & Dolch (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=63">Münzen & Geldscheine (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&path=61">Orden & Auszeichnungen (0)</a>
</li>
<li>
<a href="http://localhost/opencart/index.php?route=product/category&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>
» <a href="http://localhost/opencart/index.php?route=product/category&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&path=70_72">Blau (0)</a></li>
<li><a href="http://localhost/opencart/index.php?route=product/category&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%;
}