Question

我正在使用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;宽度：更多; =＆GT;没有帮助

为了另一个目的，我想要一个小菜单（我的主要目标）

所以我的菜单应该是这样的：

<ul class="lavaLampWithImage" id="1">
    <li><a href="#">home 1</a></li>
    <li><a href="#">home 2</a></li>
</ul>

对于这项工作，我永远不能将宽度改为更低。

平均变宽：421px;宽度：低;没有帮助。

我应该更改jquery库中的内容吗？

感谢您的关注

Answer 1

我认为我们可以用css规则改变宽度/但我想改变宽度我们应该改变photoshop菜单的背景......

我怎么能改变lavamap（jquery菜单）大小（宽度）？

1 个答案: