2012-02-10 2 views
1

Я использовал меню JavaScript Smooth Navigation на веб-сайте, и клиент жалуется, что при навигации по веб-сайту существует задержка в дизайне основной навигации.Задержка в стилизации CSS в раскрывающемся меню Javascript

Достаточно, существует задержка, возможно, 1 с, когда вы открываете страницу до того, как CSS начнет работать и стили правильно. Css находится в верхней части страницы, а JS внизу, поэтому я не знаю, что вызывает эту задержку?

Сайт http://jomast.co.uk/

Любая помощь будет принята с благодарностью.

Спасибо.

+0

Как применяется стиль? CSS? JavaScript? что вы пробовали? – ManseUK

ответ

1

Вам не нужно и не должно использоваться Javascript для простого выпадающего меню.

В любом случае добавьте класс «navv» в контейнер меню и проверьте, устраняет ли это проблему.

Изменить это:

<div id="nav> 

к этому:

<div id="nav" class="navv"> 
+0

Почему это такой плохой скрипт? Можете ли вы предложить лучшую? –

+0

В настоящее время я предлагаю не использовать Javascript вообще, вместо этого используя переходы CSS3 для обработки анимации. Быстрый Google нашел этот пример выпадающего меню, построенного без JS: http://shailan.com/demos/css3-transitions-dropdown.html Не более того, следует использовать JS для включения и выключения классов для применения/удалите стиль при зависании. –

+0

, но как насчет старых браузеров? Us JS как резервная копия? –

0

В принципе, javascript выполняется после того, как документ был полностью загружен и обрабатывается, что Javascript также занимает некоторое время. Во время этой задержки вы можете увидеть, что «неустановленная» версия меню отображается, когда браузер пытается отобразить все как можно быстрее.

Самое простое исправление заключается в том, чтобы стилизовать ваше меню таким образом, чтобы оно было «неокрашенным» вариантом выглядело бы так же, как «стиль». Тогда не будет мигать, и скрипт добавит его медленно появляющуюся анимацию, когда страница будет полностью загружена.

1

При навигации по сайту, плавная навигация не загнуться сразу. Попробуйте повторно заказав теги сценария:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/js/ddsmoothmenu.js"></script> 
<script type="text/javascript"> 
    ddlevelsmenu.init("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") 
</script> 
<script type="text/javascript" src="scripts/js/news.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.slideshow').cycle({ 
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     }); 
    }); 
</script> 

Это будет также заботиться о последователен:

Uncaught ReferenceError: $ is not defined    news.js:1 
Uncaught ReferenceError: jQuery is not defined   jquery.cycle.all.latest.js:918 
Uncaught ReferenceError: $ is not defined    index.php:149 
Uncaught ReferenceError: ddlevelsmenu is not defined index.php:158 
Смежные вопросы