Показать сообщение отдельно
  #7 (permalink)  
Старый 21.01.2015, 18:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,180

Меню с плавающей подсветкой пунктов
рони, обьясняю тебе по простому: нужно чтоб при клике подсветка закреплялась за новым пунктом на который нажали ...
ну так бы и сказали ... это в плагин надо лезть чего-то там менять ...
... тихо шифером шурша, крыша едет не спеша или тихо сам с собою я веду беседу ...
<!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>
Ответить с цитированием