рони, обьясняю тебе по простому: нужно чтоб при клике подсветка закреплялась за новым пунктом на который нажали ...
ну так бы и сказали ... это в плагин надо лезть чего-то там менять ...
... тихо шифером шурша, крыша едет не спеша
или тихо сам с собою я веду беседу ...
<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<style type="text/css">
.webwidget_menu_glide{
padding: 5px;
border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
width: 100px;
height: 20px;
background-color: fuchsia;
position: absolute;
border-radius:10px;
}
.webwidget_menu_glide ul{
padding: 0px;
margin: 0px;
font-family:Arial;
}
.webwidget_menu_glide ul li{
float: left;
list-style: none;
position: relative;
text-align: center;
margin-right: 10px;
width: 100px;
}
.webwidget_menu_glide ul li a{
color: black;
text-decoration: none;
font-weight: bold;
}
.webwidget_menu_glide ul li ul{
border-radius:7px;
padding-bottom: 5px;
position: absolute;
z-index: 999999;
display: none;
}
.webwidget_menu_glide ul li ul li{
border-radius:0px;
margin: 0px;
float: none;
border:none;
word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
padding-left: 5px;
padding-right: 5px;
font-weight: normal;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script>
(function(a) {
a.fn.webwidget_menu_glide = function(p) {
var p = p || {};
var f = p && p.menu_text_size ? p.menu_text_size : "12px";
var g = p && p.menu_text_color ? p.menu_text_color : "blue";
var h = p && p.menu_margin ? p.menu_margin : "10px";
var i = p && p.menu_width ? p.menu_width : "100px";
var j = p && p.menu_height ? p.menu_height : "20px";
var k = p && p.menu_sprite_color ? p.menu_sprite_color : "red";
var l = p && p.menu_background_color ? p.menu_background_color : "black";
var m = p && p.sprite_speed ? p.sprite_speed : "fast";
f += "px";
h += "px";
i += "px";
j += "px";
var n = a(this);
if (n.children("ul").length == 0 || n.find("li").length == 0) {
n.append("Require menu content");
return null
}
s_m(n.children("ul").children("li"), h, i, j);
s_m_t_c(n.find("a"), g, j, f);
n.css("background-color", l);
if (n.children("ul").children("li").is(".current")) {
var o = n.children("ul").children("li").filter(".current").offset()
} else {
var o = n.children("ul").children("li:first").offset()
}
var q = o.left + 'px';
n.children("ul").children("li").click(function(event) {
event.preventDefault();
n.children("ul").children("li").removeClass('current');
$(this).addClass('current');
q = $(this).offset().left + 'px'
})
s_m_s_c(n.find(".webwidget_menu_glide_sprite"), k, i, j, q);
n.children("ul").children("li").hover(function() {
var b = $(this).offset();
var c = b.left + 'px';
n.find(".webwidget_menu_glide_sprite").stop().animate({
left: c
}, m)
}, function() {
n.find(".webwidget_menu_glide_sprite").stop().animate({
left: q
}, m)
});
n.children("ul").children("li").children("ul").children("li").hover(function() {}, function() {});
function s_m_t_c(a, b, c, d) {
a.css("color", b);
a.css("line-height", c);
a.css("font-size", d)
}
function s_m(a, b, c, d) {
style = "margin-right:" + b + "; width: " + c + "; height: " + d + ";";
a.attr("style", style)
}
function s_m_s_c(a, b, c, d, e) {
a.css("background-color", b);
a.css("width", c);
a.css("height", d);
a.css("left", e)
}
}
})(jQuery);
</script>
</head>
<body>
<table width="600">
<tr>
<td>
<h2>Demo1</h2>
<br/>
<br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide1").webwidget_menu_glide({
menu_width: "100",
menu_height: "30",
menu_text_size: "15",
menu_text_color: "#FFF",
menu_sprite_color: "red",
menu_background_color: "#C91A3E",
menu_margin: "5",
sprite_speed: "normal",
container: "webwidget_menu_glide1"
});
});
</script>
<div id="webwidget_menu_glide1" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">News</a>
</li>
<li class="current"><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">More...</a>
</li>
</ul>
<div style="clear: both"></div>
</div>
</td>
</tr>
<tr>
<td>
<h2>Demo2</h2>
<br/>
<br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide2").webwidget_menu_glide({
menu_width: "100",
menu_height: "30",
menu_text_size: "15",
menu_text_color: "#CCC",
menu_sprite_color: "#666",
menu_background_color: "#000",
menu_margin: "5",
sprite_speed: "normal",
container: "webwidget_menu_glide2"
});
});
</script>
<div id="webwidget_menu_glide2" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">News</a>
</li>
<li class="current"><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">More...</a>
</li>
</ul>
<div style="clear: both"></div>
</div>
</td>
</tr>
<tr>
<td>
<h2>Demo3</h2>
<br/>
<br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide3").webwidget_menu_glide({
menu_width: "100",
menu_height: "23",
menu_text_size: "12",
menu_text_color: "#FFF",
menu_sprite_color: "#86C7EF",
menu_background_color: "#0F67A1",
menu_margin: "2",
sprite_speed: "normal",
container: "webwidget_menu_glide3"
});
});
</script>
<div id="webwidget_menu_glide3" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">News</a>
</li>
<li class="current"><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">More...</a>
</li>
</ul>
<div style="clear: both"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
