我如何更改lavamap（jquery菜单）大小（宽度）？
我正在使用 lavalamp jquery 菜单作为我的菜单...
我的项目中的一切都很好（就像它的示例）...
但我无法水平更改它的大小...
我该怎么做？
我的asp.net代码（带有html）：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Amlak.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/LavaLamp.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.lavalamp.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document.body).ready(function () {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function (event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MenuDiv" dir="rtl">
<h3>
With Image</h3>
<ul class="lavaLampWithImage" id="1">
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
</ul>
</div>
</form>
</body>
</html>
和css代码是这样的：
.lavaLampWithImage
{
position: relative;
height: 29px;
width: 421px;
background: url("../Images/bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li
{
float: right;
list-style: none;
}
.lavaLampWithImage li.back
{
background: url("../Images/lava.gif") no-repeat right -30px;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left
{
background: url("../Images/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a
{
font: bold 14px tahoma;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: right;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited
{
border: none;
}
对于上面的代码，一切都可以。
但是当我像这样更改菜单（增加 li 菜单）时：
<ul class="lavaLampWithImage" id="1">
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
</ul>
所以所有东西都是混合的......
为了解决这个问题，我更改了宽度：421px；宽度：更多； => 对于另一个目的没有帮助
，我想要一个小菜单（我的主要目标），
所以我的菜单应该是这样的：
<ul class="lavaLampWithImage" id="1">
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
</ul>
对于这项工作，我永远无法将宽度更改为更低。
平均变化宽度：421px；宽度：下；没有帮助。
我应该更改 jquery 库中的某些内容吗？
感谢您的关注
i am using lavalamp jquery menu as my menu...
every thing is ok (like it's sample) in my project...
but i could n't change it's size horizontally...
how can i do that ?
my asp.net code (with html) :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Amlak.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/LavaLamp.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.lavalamp.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document.body).ready(function () {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function (event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MenuDiv" dir="rtl">
<h3>
With Image</h3>
<ul class="lavaLampWithImage" id="1">
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
</ul>
</div>
</form>
</body>
</html>
and css code is like this :
.lavaLampWithImage
{
position: relative;
height: 29px;
width: 421px;
background: url("../Images/bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li
{
float: right;
list-style: none;
}
.lavaLampWithImage li.back
{
background: url("../Images/lava.gif") no-repeat right -30px;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left
{
background: url("../Images/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a
{
font: bold 14px tahoma;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: right;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited
{
border: none;
}
for upper codes every thing is ok.
but when i change menu (increase li menu) like this :
<ul class="lavaLampWithImage" id="1">
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
</ul>
so every thing is commixed...
for solving this issue i changed width: 421px; to width: more; => not help
for another purpose i want to have a little menu (my main goal)
so my menu should be like this :
<ul class="lavaLampWithImage" id="1">
<li><a href="#">home 1</a></li>
<li><a href="#">home 2</a></li>
</ul>
for this job i never could change the width to lower.
mean changing width:421px; to width:lower; not help.
should i change something inside jquery libraries ?
thanks for your attention
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为我们可以使用 css 规则更改宽度/但我发现要更改宽度，我们应该更改 Photoshop 中菜单的背景...
i thought we can change the width with css rules / but i figured out for changing the width we should change the background of menu in photoshop ...