как я могу изменить размер (ширину) lavamap (меню jquery)? - PullRequest
Новая
       35

как я могу изменить размер (ширину) lavamap (меню jquery)?

0 голосов
/ 06 апреля 2011

я использую меню javery lavalamp в качестве моего меню ...

все в порядке (как пример) в моем проекте ...

но я не могу изменить егоразмер по горизонтали ...

как я могу это сделать?

мой код 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?

спасибо за ваше внимание

1 Ответ

0 голосов
/ 15 мая 2011

Я думал, что мы можем изменить ширину с помощью правил CSS /, но я решил, что для изменения ширины мы должны изменить фон меню в фотошопе ...

...