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
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 …