0

メニューとして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 ライブラリ内の何かを変更する必要がありますか?

ご清聴ありがとうございました

4

1 に答える 1

0

CSS ルールで幅を変更できると思っていましたが、幅を変更するには、Photoshop でメニューの背景を変更する必要があることがわかりました ...

于 2011-05-15T00:08:14.993 に答える