CSS nabídka/menu-svisle
Vertikální rolovací nabídka
Dělené Menu
Kód:
<style>
div.rg {
border-style: solid;
border-top-color: rgba(255, 255, 230, 1);
border-top-width: 1px;
border-bottom-color: rgba(204, 204, 204, 1);
border-bottom-width: 1px;
border-left-color: rgba(238, 238, 238, 1);
border-left-width: 1px;
border-right-color: rgba(172, 173, 159, 1);
border-right-width: 1px;
background-color: #eeeeee;
border-radius: 8px;
width: 210px;
height: 350px;
font-size: 13px;
font-family: arial, sans-serif;
padding-left: 10px;
}
.vertical-menu {
width: 202px;
height: 255px;
overflow-y: auto;
font-size: 12px;
}
.vertical-menu a {
border-style: solid;
border-top-color: rgba(255, 255, 230, 1);
border-top-width: 1px;
border-bottom-color: rgba(191, 191, 191, 1);
border-bottom-width: 1px;
border-left-color: rgba(238, 238, 238, 1);
border-left-width: 1px;
border-right-color: rgba(172, 173, 159, 1);
border-right-width: 1px;
height: 13px!important;
line-height: 13px!important;
background-color: #eeeeee;
color: #003380;
display: block;
padding: 1px;
padding-left: 5px;
text-decoration: none;
}
.vertical-menu a:hover, .vertical-menu a.active {
border-style: solid;
border-top-color: rgba(162, 166, 172, 1);
border-top-width: 1px;
border-bottom-color: rgba(238, 238, 238, 1);
border-bottom-width: 1px;
border-left-color: rgba(204, 204, 204, 1);
border-left-width: 1px;
border-right-color: rgba(238, 238, 238, 1);
border-right-width: 1px;
background-color: #c2ff99;
color: #2d8000;
}
.vertical-menu p.empty {
height: 16px!important;
line-height: 16px;
margin: 0 auto;
padding: 0;
}
div.right {
width: 62px;
float: right;
}
div.left {
width: 123px;
float: left;
}
</style>
<div class="rg">
<h3>Vertikální rolovací nabídka</h3>
<p>Dělené Menu</p>
<div class="vertical-menu">
<a href="#no" class="active">Domů</a>
<a href="#no">Link 1</a>
<a href="#no">Link 2</a>
<a href="#no">Link 3</a>
<a href="#no">Link 4</a>
<a href="#no">Link 5</a>
<p class="empty"> </p>
<div class="left"><a href="#no">Link</a></div>
<div class="right"><a href="#no">Link</a></div>
<div style="clear:both;"></div>
<a href="#no">Link 6</a>
<a href="#no">Link 7</a>
<a href="#no">Link 8</a>
<a href="#no">Link 9</a>
<div class="left"><a href="#no">Link</a></div>
<div class="right"><a href="#no">Link</a></div>
<div style="clear:both;"></div>
<a href="#no">Link 10</a>
<a href="#no">Link 11</a>
<a href="#no">Link 12</a>
<a href="#no">Link 13</a>
<a href="#no">Link 14</a>
<a href="#no">Link 15</a>
<a href="#no">Link 16</a>
<a href="#no">Link 17</a>
<a href="#no">Link 18</a>
<a href="#no">Link 19</a>
<a href="#no">Link 20</a>
<a href="#no">Link 21</a>
<a href="#no">Link 22</a>
<a href="#no">Link 23</a>
<a href="#no">Link 24</a>
<a href="#no">Link 25</a>
<a href="#no">Link 26</a>
<a href="#no">Link 27</a>
<a href="#no">Link 28</a>
<a href="#no">Link 29</a>
<a href="#no">Link 30</a>
<a href="#no">Link 31</a>
</div></div>