Простая навигация jQuery и CSS случайно не работает при обновлении ... все браузеры - PullRequest
Новая
       24

Простая навигация jQuery и CSS случайно не работает при обновлении ... все браузеры

0 голосов
/ 15 октября 2011

Хорошо, похоже, это имеет место во всех браузерах и разрешениях. Я новичок в кодировании, поэтому я уверен, что это простая ошибка, которую я пропускаю. Я попросил группу друзей, и, кажется, это одинаково для всех. Навигация по навигации работает только в некоторых случаях в основном кодированном макете (еще не полностью закодирован). Я вытащил навигацию сам по себе, и она, кажется, работает правильно 100% времени.

Вы можете посмотреть, как это должно работать здесь: http://dperolio.com/newnav/css/

Вот в чем проблема: http://dperolio.com/tealtop2

Изначально это может сработать для вас, а может и нет. Если вы обновите спам (Ctrl + R), это иногда будет работать. Когда это не работает, кажется, что оно просто находится в состоянии наведения, несмотря ни на что (жирные белые ссылки).

Я ценю любые идеи, которые вы можете предложить; Опять же, я вполне уверен, что только что сделал какую-то глупую ошибку, и, надеюсь, кто-то более опытный сможет заметить это и указать мне? Спасибо!

Ответы [ 2 ]

0 голосов
/ 06 ноября 2011

Я знал, что это было что-то глупое ... Это потому, что у меня был внешний CSS, указанный после вызова jQuery, а не до него.

0 голосов
/ 15 октября 2011

Вот быстрое демо, которое я сделал для вас: 

$(document).ready(function() {

  $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

  $("#topnav li").each(function() { //For each list item...
    var linkText = $(this).find("a").html(); //Find the text inside of the a tag
    $(this).find("span").show().html(linkText); //Add the text in the span tag
  });

  $("#topnav li").hover(function() { //On hover...
    $(this).find("span").stop().animate({
      marginTop: "-40" //Find the span tag and move it up 40 pixels
    }, 250);
  }, function() { //On hover out...
    $(this).find("span").stop().animate({
      marginTop: "0" //Move the span back to its original state (0px)
    }, 250);
  });

});
ul#topnav {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 1.1em;
}

ul#topnav li {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*--Important - Masking out the hover state by default--*/
  float: left;
  height: 40px;
}

ul#topnav a,
ul#topnav span {
  /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
  padding: 10px 20px;
  float: left;
  text-decoration: none;
  color: #000;
  background: url(a_bg.gif) repeat-x;
  text-transform: uppercase;
  clear: both;
  width: 100%;
  height: 20px;
  line-height: 20px;
  /*--Vertical alignment of text--*/
}

ul#topnav a {
  /*--This is basically the hover state of navigation--*/
  color: #555;
  background-position: left bottom;
}

ul#topnav span {
  /*--Default state of navigation--*/
  background-position: left top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul id="topnav" class="v2">
    <li><a href="http://www.sohtanaka.com/">Home</a></li>
    <li><a href="http://www.sohtanaka.com/web-design/web-design-services.php">Services</a></li>
    <li><a href="http://www.sohtanaka.com/web-design/designbombscom/">Portfolio</a></li>
    <li><a href="http://www.sohtanaka.com/web-design-blog/">Blog</a></li>
    <li><a href="http://www.sohtanaka.com/about/">About</a></li>
  </ul>
</div>
...