我的菜单隐藏在图像背后吗？ HTML CSS JQuery [英] Is My Menu Hiding Behind The Images? HTML CSS JQuery
本文介绍了我的菜单隐藏在图像背后吗？ HTML CSS JQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嘿！
所以我完成了我的项目，这是一个完整的webslider作为我的主页&现在我想通过为它添加一个漂亮的菜单来让事情变得更花哨！
事情是......没有任何东西出现..它是否可能隐藏在图像背后？
我知道我可以注释掉代码然后检查但我想知道如何构造我的代码以使其尽可能好地工作。我承认它有点乱，但在这里与我合作我对JQuery有点新鲜。
我不介意任何指针&关于如何改进我的代码的提示。
例如如何将我的CSS菜单放在图像上而不是后面。
谢谢！
Hey!
So I finished my project which was a full on webslider as my homepage & now I want to make things more "Fancy" by adding a nice menu to it all!
The thing is.. nothing is showing up.. Is it possibly hiding behind the images?
I know I could comment out the code and just check but I want to know how I should structure my code to make it work as good as possible. I admit that it is a little bit messy but work with me here I am kinda new to JQuery.
I wouldnt mind any pointers & tips on how to improve my code.
For example how to place my css menu so its on top of the images instead of behind.
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*Menu CSS*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a{
text-decoration: none;
color: #fff;
}
/*Menu CSS*/
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<!-- <div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/picOne.jpg">
<img src="images/picTwo.jpg">
<img src="images/picThree.jpg">
</div> -->
<!-- Full Width Responsive Slider -->
<ul>
<li><a href="Home"><a/></li>
<ul>
<li><a href="Link1"><a/></li>
<li><a href="Link2"><a/></li>
<li><a href="Link3"><a/></li>
<li><a href="Link4"><a/></li>
<li><a href="Link5"><a/></li>
</ul>
</li>
<li><a href="About"><a/></li>
<ul>
<li><a href="Link1"><a/></li>
<li><a href="Link2"><a/></li>
<li><a href="Link3"><a/></li>
<li><a href="Link4"><a/></li>
<li><a href="Link5"><a/></li>
</ul>
<li><a href="Services"><a/></li>
<ul>
<li><a href="Link1"><a/></li>
<li><a href="Link2"><a/></li>
<li><a href="Link3"><a/></li>
<li><a href="Link4"><a/></li>
<li><a href="Link5"><a/></li>
</ul>
<li><a href="Contact Me"><a/></li>
<ul>
<li><a href="Link1"><a/></li>
<li><a href="Link2"><a/></li>
<li><a href="Link3"><a/></li>
<li><a href="Link4"><a/></li>
<li><a href="Link5"><a/></li>
</ul>
<li><a href=""><a/></li>
</ul>
</body>
</html>
推荐答案
您是否尝试过添加
z-indexto the css menu?
to the css menu?
Why nothing is showing up?
Nice menu you say; but you forgot to give texts for the anchors in the menu! All of it is empty and that is why you see nothing on the screen.
Just give some values for the menu items and check it. for example I have given some sample values in your code as below.
Why nothing is showing up?
Nice menu you say; but you forgot to give texts for the anchors in the menu! All of it is empty and that is why you see nothing on the screen.
Just give some values for the menu items and check it. for example I have given some sample values in your code as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*Menu CSS*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a{
text-decoration: none;
color: #fff;
}
/*Menu CSS*/
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<!-- <div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/picOne.jpg">
<img src="images/picTwo.jpg">
<img src="images/picThree.jpg">
</div> -->
<!-- Full Width Responsive Slider -->
<ul>
<li><a href="Home">Home<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
</li>
<li><a href="About">About<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
<li><a href="Services">Services<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
<li><a href="Contact Me">Contact Me<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
<li><a href=""><a/></li>
</ul>
</body>
</html>
Now your menu items will appear on your screen. Once you give the appropriate styles for the menu list, you will have the fancy menu you require!
Now your menu items will appear on your screen. Once you give the appropriate styles for the menu list, you will have the fancy menu you require!
这篇关于我的菜单隐藏在图像背后吗？ HTML CSS JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
