我如何更改 lavamap（jquery 菜单）大小（宽度）？答案

【问题标题】：how can i change lavamap (jquery menu) size (width)?我如何更改 lavamap（jquery 菜单）大小（宽度）？
【发布时间】：2011-04-06 12:31:17
【问题描述】：

我正在使用 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 库中更改一些内容吗？

感谢您的关注

【问题讨论】：

标签： c# jquery visual-studio-2010 plugins lavalamp

【解决方案1】：

我认为我们可以使用 css 规则更改宽度/但我发现要更改宽度，我们应该更改 photoshop 中菜单的背景...

【讨论】：