0

我一直在尝试找到一种方法来为我的导航提供带有图像(不是文本)的下拉菜单,我似乎找到了解决方案,但现在我的问题是添加图像链接。我通过这篇文章用 CSS 完成了这一切:

带图像的下拉选择

我对 JavaScript 不是很熟悉,也许这样做会更容易,但我终于让它与上面的编码一起工作,我只是不知道如何添加链接。

这是我的CSS:

/* Drop-down styling */   

image-dropdown {
/*style the "box" in its minimzed state*/
border:0px solid black; 
width:192px; 
height:80px; 
overflow:hidden;
/*animate the dropdown collapsing*/
transition: height 0.1s;
}

#image-dropdown:hover {
/*when expanded, the dropdown will get native means of scrolling*/
height:350px; 
overflow-y:visible;
/*animate the dropdown expanding*/
transition: height 0.5s;
z-index: 100;
display: block;
position: relative;
}

#image-dropdown input {
/*hide the nasty default radio buttons!*/
position:absolute;
top:0;
left:0;
opacity:0;
}

#image-dropdown label[for=line1] {
/*style the labels to look like dropdown options*/
display:none; 
margin:2px; 
height:80px; 
opacity:0.2; 
background:url(nav_02.jpg);
z-index: 100;
}

label[for=line2]  {
display:none; 
margin:2px; 
height:50px; 
opacity:0.2;
background-image:url(subnav_02.jpg); 
z-index: 100;
} 

label[for=line3]   {
display:none; 
margin:2px; 
height:50px; 
opacity:0.2;
background-image:url(subnav_03.jpg);
z-index: 100;
}

label[for=line4]   {
display:none; 
margin:2px; 
height:50px; 
opacity:0.2;
background-image:url(subnav_06.jpg);  
}

label[for=line5]   {
display:none; 
margin:2px; 
height:50px; 
opacity:0.2;
background-image:url(subnav_08.jpg);
}

label[for=line6]   {
display:none; 
margin:2px; 
height:50px; 
opacity:0.2;
background-image:url(subnav_10.jpg);
}


#image-dropdown:hover label{
/*this is how labels render in the "expanded" state.
 we want to see only the selected radio button in the collapsed menu,
 and all of them when expanded*/
display:block;
opacity: 1; 
}

#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button
  (with our markup they are semantically related) should be fully opaque
  and visible even in the collapsed menu*/
opacity:1 !important; display:block;
}

这是我的html:

<div id="image-dropdown"><input checked="checked"
id="line1" name="line-style" value="1"
type="radio" /><label for="line1"></label>
<input id="line2" name="line-style" value="2"
type="radio" /><label for="line2"></label><input
id="line3" name="line-style" value="3"
type="radio" /><label for="line3"></label><input
id="line4" name="line-style" value="4"
type="radio" /><label for="line4"></label><input
id="line5" name="line-style" value="5"
type="radio" /><label for="line5"></label><input
id="line6" name="line-style" value="6"
type="radio" /><label for="line6"></label><input
id="line7" name="line-style" value="7"
type="radio" /><label for="line7"></label></div>

任何帮助将不胜感激,这几天我一直在搞砸......

4

1 回答 1

0
于 2013-04-04T13:46:09.300 回答