enkel Modificering af vertikal menu
Hej. Vil høre om der nogle, der kan hjælpe mig med at modificere nedenstående vertikal menu? Har forsøgt i en del gange nu, men uden held.Det jeg ønsker i min menu:
1) Når man klikker på feks. Linket "Product 1", så skal den åbne siden products.html, og ikke blot åbne submenuerne. Den skal både åbne products.html og submenuerne.
2) Når man har klikket på feks. en submenu, så skal denne den være markeret med en hover. Dvs. at man kan se, hvilket link man har trykket på.
Html-delen:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='products.html'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
CSS-delen:
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 15px 20px;
border-left: 1px solid #1682ba;
border-right: 1px solid #1682ba;
border-top: 1px solid #1682ba;
cursor: pointer;
z-index: 2;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
background: #36aae7;
background: -webkit-linear-gradient(#36aae7, #1fa0e4);
background: -moz-linear-gradient(#36aae7, #1fa0e4);
background: -o-linear-gradient(#36aae7, #1fa0e4);
background: -ms-linear-gradient(#36aae7, #1fa0e4);
background: linear-gradient(#36aae7, #1fa0e4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
color: #eeeeee;
background: #1fa0e4;
background: -webkit-linear-gradient(#1fa0e4, #1992d1);
background: -moz-linear-gradient(#1fa0e4, #1992d1);
background: -o-linear-gradient(#1fa0e4, #1992d1);
background: -ms-linear-gradient(#1fa0e4, #1992d1);
background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
border-bottom: 1px solid #1682ba;
}
.holder {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
}
.holder::after,
.holder::before {
display: block;
position: absolute;
content: "";
width: 6px;
height: 6px;
right: 20px;
z-index: 10;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.holder::after {
top: 17px;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
border-color: #eeeeee;
}
.holder::before {
top: 18px;
border-top: 2px solid;
border-left: 2px solid;
border-top-color: inherit;
border-left-color: inherit;
}
#cssmenu ul ul li a {
cursor: pointer;
border-bottom: 1px solid #32373e;
border-left: 1px solid #32373e;
border-right: 1px solid #32373e;
padding: 10px 20px;
z-index: 1;
text-decoration: none;
font-size: 13px;
color: #eeeeee;
background: #49505a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #424852;
color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
display: block;
position: absolute;
content: "";
width: 5px;
height: 5px;
right: 20px;
z-index: 10;
top: 11.5px;
border-top: 2px solid #eeeeee;
border-left: 2px solid #eeeeee;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
border-color: #ffffff;
}
jQuery-delen:
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
(function getColor() {
var r, g, b;
var textColor = $('#cssmenu').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
}
else
{
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
}
})();
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return l;
}
