0

При загрузке этого горизонтально динамического меню кнопки отображаются фиолетово-синим цветом плавно переходя с одного на другой. В браузерах Opera, IE, Safari код не отображает полноценной картины и загружается только синий цвет без плавного перехода в фиолетовый. (Код нормально загружается на лисе и хроме) Буду признательный за помощь в настройке кроссбраузерности на эти три браузера.

<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
#menu { position: absolute; top: 29px; right: 0px; 
background: url(http://1hd.com.ua/images/fon-menu.png) no-repeat; left: 125px; width: 840px; height: 98px; z-index: 10; }   
#container {
 width: 960px;
 margin: 1px auto;
}
ul, li {
  right: -10px;
 margin: 0; padding: 0;
}
#blob {
 border-right: 1px solid #0059ec;
 border-left: 1px solid #0059ec;
 position: absolute;
 top: 0;
 z-index : 1;
 background: #0b2b61;
 background: -moz-linear-gradient(top, #740b6e, #295bb0);
 background: -webkit-gradient(linear, left top, left bottom, from(#740b6e), to(#295bb0));
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-box-shadow: 2px 3px 10px #011331;
 -webkit-box-shadow: 2px 3px 10px #011331;
}
#nav {
 position: relative;
 background: #;
 float: left;
}
#nav li {
 float: left;
 list-style: none;
 border-right: 1px solid #4a4a4a;
 border-left: 1px solid black;
}
#nav li a {
 color: #e3e3e3;
 position: relative;
 z-index: 2;
 float: left;
 font-size: 17px;
 font-family: helvetica, arial, sans-serif;
 text-decoration: none;
 padding: 24px 13px;
}
</style>

</head>

<body>
 <div id="menu" class="clearfix">
<div id="container">

    <ul id="nav">
         <li id="selected"><a href="#">PAGE1</a></li>
        <li><a href="#">PAGE2</a></li>
        <li><a href="#">PAGE3</a></li>
        <li><a href="#">PAGE4</a></li>
        <li><a href="#">PAGE5</a></li>
    </ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
(function($) {
    $.fn.spasticNav = function(options) {
        options = $.extend({
            overlap : 20,
            speed : 500,
            reset : 1500,
            color : '#295bb0',
            easing : 'easeOutExpo'
        }, options);

        return this.each(function() {

            var nav = $(this),
                currentPageItem = $('#selected', nav),
                blob,
                reset;

            $('<li id="blob"></li>').css({
                width : currentPageItem.outerWidth(),
                height : currentPageItem.outerHeight() + options.overlap,
                left : currentPageItem.position().left,
                top : currentPageItem.position().top - options.overlap / 2,
                backgroundColor : options.color
            }).appendTo(this);

            blob = $('#blob', nav);

            $('li:not(#blob)', nav).hover(function() {
                // mouse over
                clearTimeout(reset);
                blob.animate(
                    {
                        left : $(this).position().left,
                        width : $(this).width()
                    },
                    {
                        duration : options.speed,
                        easing : options.easing,
                        queue : false
                    }
                );
            }, function() {
                // mouse out    
                reset = setTimeout(function() {
                    blob.animate({
                        width : currentPageItem.outerWidth(),
                        left : currentPageItem.position().left
                    }, options.speed)
                }, options.reset);
            });
        }); // end each
    };
})(jQuery);
</script>

<script type="text/javascript">
    $('#nav').spasticNav();
</script>

</div></div> <!-- end #menu -->

</body>
</html>

1 ответ 1

1

Ты указал линейный градиент только для мозиллы. Лови кусок css:

#blob {
 border-right: 1px solid #0059ec;
 border-left: 1px solid #0059ec;
 position: absolute;
 top: 0;
 z-index : 1;
 background: #0b2b61;
 background: -moz-linear-gradient(top, #740b6e, #295bb0); /* Firefox 3.6+ */
 /* Chrome 1-9, Safari 4-5 */
 background: -webkit-gradient(linear, left top, left bottom, 
             color-stop(0%,#740b6e), color-stop(100%,#295bb0));
 /* Chrome 10+, Safari 5.1+ */
 background: -webkit-linear-gradient(top, #740b6e, #295bb0);
 background: -o-linear-gradient(top, #740b6e, #295bb0); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #740b6e, #295bb0); /* IE10 */
 background: linear-gradient(top, #740b6e, #295bb0); /* CSS3 */ 
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-box-shadow: 2px 3px 10px #011331;
 -webkit-box-shadow: 2px 3px 10px #011331;
}
4
  • Никита, увы этот кусок не работает=( в опере и IE линейный градиент не загружается ... что делать? 31 янв 2012 в 13:25
  • В опере 11.61 всё прекрасно работает! В IE 9 — не работает. Видимо ошибка где-то в <script type="text/javascript">...</script>
    – Nikita
    31 янв 2012 в 13:38
  • ослик IE 9 как всегда не отображает реальной картины опера у меня 11,00 не отображает. С JS не помощешь разобраться? что бы хотя бы в операх загружалось И где к-стати можно почитать про кроссбраузерностьь хочу сам найчиться настраивать. Я в это дуб дерево 31 янв 2012 в 15:55
  • С JS не помогу разобраться, так как сам полный ноль. Что бы в опере и других браузерах градиент 100 % отображался, можно картинку на фон вставить. Это: background: url(images/menubg.png) no-repeat; как то так А где про кроссбраузерность почитать — не знаю. Только если на shpargalkablog.ru или htmbook.ru
    – Nikita
    31 янв 2012 в 17:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.