Jquery 如何使用自己的图像设置按钮的样式?如何消除<;之间的图像空白;李>;及<;李>;密码
我想制作一个三行导航菜单 这是我的小提琴 我想样式我的按钮,原始图像没有灰色背景,我想使用我自己的图像 此外,为什么我的图像之间有空白?如何删除空白?这样我的图像可以很好地连接 我的编码Jquery 如何使用自己的图像设置按钮的样式?如何消除<;之间的图像空白;李>;及<;李>;密码,jquery,html,image,button,navigation,Jquery,Html,Image,Button,Navigation,我想制作一个三行导航菜单 这是我的小提琴 我想样式我的按钮,原始图像没有灰色背景,我想使用我自己的图像 此外,为什么我的图像之间有空白?如何删除空白?这样我的图像可以很好地连接 我的编码 <script src="http://code.jquery.com/jquery-1.7.1.js"></script> <button class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" widt
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<button class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" width="40" height="40" /></button>
<div id="navbar" style="display:none;">
<nav>
<ul>
<li>
<div id="wrapper">
<img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
<p class="text"><a href="#">Home</a></p>
</div>
</li>
<li>
<div id="wrapper">
<img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
<p class="text"><a href="#">About</a></p>
</div>
</li>
<li>
<div id="wrapper">
<img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
<p class="text"><a href="#">Contact</a></p>
</div>
</li>
</ul>
</nav>
</div>
Javascript
$('.menu').click(function() {
$('#navbar').toggle('slow');
});
如果可以,请给我一个演示,这样我会更容易理解,谢谢
这正是我想要的,谢谢你的帮助
您是否尝试在li元素上使用
列表样式图像
?像这样:
ul li {
list-style-image: url('path/of/image/file');
}
(很抱歉,如果我的答案不是您等待的答案,我不确定是否理解该问题)。您需要使用锚定,而不是下面的按钮
<a class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" width="40" height="40" /></a>
更新
将此添加到css中
#navbar div {
height: 53px;
}
不行,你看见小提琴了吗?当你点击按钮时,图像会出现,但是图像之间有空格,我想去掉空格,这样图像可以像直线一样平滑连接。不是主链接和图像之间的空格,是主图像和关于图像之间的空格,有什么问题要解决吗?图像应该是这样的,因为空间是由li元素中的div高度决定的,所以你需要调整该高度。现在,你可以使用我更新的答案
#wrapper .text {
position:relative;
bottom: 42px;
left: 34px;
visibility:hidden;
}
#navbar div {
height: 53px;
}