Как только я щелкаю опцию меню, вся страница прокручивается вместе с ней? Как мне это остановить?

Question

Как только я щелкаю опцию меню, вся страница прокручивается вместе с ней? Как мне это остановить?

0

Как только я нажимаю кнопку меню, вся страница прокручивается вместе с ней? Как остановить это?

расположенный по строке 411 в jsfiddle

<style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
    @charset 'UTF-8';
    /* Base Styles */
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      font-size: 15px;
      position: relative;



    }
    #cssmenu a {
      line-height: 1.3;
    }
    #cssmenu {
      width: 200px;

    }
    #cssmenu > ul > li > a {
      padding-right: 40px;
      font-size: 13px;
      font-weight: bold;
      display: block;
      background: #000000;
      color: #9C9C9C;
      border-bottom: 1px solid #393939;
      text-transform: uppercase;

    }
    #cssmenu > ul > li > a > span {
      background: #000000;
      padding: 10px;
      display: block;
      font-size: 15px;
      font-weight: 300;
    }
    #cssmenu > ul > li > a:hover {
      text-decoration: none;
    }
    #cssmenu > ul > li.active {
      border-bottom: none;
    }
    #cssmenu > ul > li.active > a {
      color: #fff;
    }
    #cssmenu > ul > li.active > a span {
      background: #000000;
    }
    #cssmenu span.cnt {
      position: absolute;
      top: px;
      right: 15px;
      padding: 0;
      margin: 0;
      background: none;
      padding-top: 20px;
    }
    /* Sub menu */
    #cssmenu ul ul {
      display: none;
    }
    #cssmenu ul ul li {
      border: 1px solid #2A2A2A;
      border-top: 0;
    }
    #cssmenu ul ul a {
      padding: 10px;
      display: block;
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 200;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #cssmenu ul ul a:hover {
      color: gray;
    }
    #cssmenu ul ul li.odd {
      background: #2E2E2E;
    }
    #cssmenu ul ul li.even {
      background: #2E2E2E;
    }</style>

    <style>
        .class_slidshow2 {
       padding-left: 200px;
    }
    .rslides li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      padding-left: 200px;
      }



    <style>.slideshow {
        font-size: 30px;
        text-transform: uppercase;
        font-family: Arial, Verdana, sans-serif;
        color: #a81c11;
        display:inline;
        width: 80%; /* or dependent on what you like */
        float: left;

    } 

    .slideshow {
        float: right;
        display:inline;
        width: 20%; /* relative to width for introtekst */

    }</style>

У меня также есть другие проблемы. Как я могу удерживать или "придерживать" все навигационное поле вправо при прокрутке? В более подробном вопросе. Я хочу, чтобы мой контент находился справа от navmenu, будет много контента, поэтому, когда пользователь прокручивает, они все равно должны видеть навигацию без необходимости прокрутки назад, и это для моей личной апелляции.

расположенный по строке 411 в jsfiddle

    <style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 15px;
  position: relative;



}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 200px;

}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 13px;
  font-weight: bold;
  display: block;
  background: #000000;
  color: #9C9C9C;
  border-bottom: 1px solid #393939;
  text-transform: uppercase;

}
#cssmenu > ul > li > a > span {
  background: #000000;
  padding: 10px;
  display: block;
  font-size: 15px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #000000;
}
#cssmenu span.cnt {
  position: absolute;
  top: px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
  padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #2A2A2A;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 200;
  font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
  color: gray;
}
#cssmenu ul ul li.odd {
  background: #2E2E2E;
}
#cssmenu ul ul li.even {
  background: #2E2E2E;
}</style>

<style>
    .class_slidshow2 {
   padding-left: 200px;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  padding-left: 200px;
  }



<style>.slideshow {
    font-size: 30px;
    text-transform: uppercase;
    font-family: Arial, Verdana, sans-serif;
    color: #a81c11;
    display:inline;
    width: 80%; /* or dependent on what you like */
    float: left;

} 

.slideshow {
    float: right;
    display:inline;
    width: 20%; /* relative to width for introtekst */

}</style>

Я также заметил, что во всех браузерах фон перемещается, когда пользователь прокручивается. Это приводит к тому, что вся страница выглядит дезориентированной. Я попытался, положение: исправить; , но это не имело никакого эффекта.

Jsfiddle: http://jsfiddle.net/8GzLv/

Вставьте всю разметку в: http://www.jmarshall.com/easy/html/testbed.html, чтобы вы могли видеть, о чем я говорю. Или уменьшите масштаб Jsfiddle в браузере.

Это стиль для фона: расположенный по строке 334 в Jsfiddle

<style>#headerWrapper {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: black; /* Omit to see body content scroll behind radius.  */
}
#headerBorder{
    border: black; 
    border-radius: 35px; 
    -moz-border-radius: 35px; 
    -webkit-border-radius: 35px; 
    overflow:hidden;
}
#headerContent {
    background-image:url("http://www.fimfiction-static.net/images/story_images/92970_r.png?1364253348");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    opacity: 1;
}</style>

И как я могу получить содержимое в верхней части экрана, а рядом с навигационной панелью

user3310999 14 фев. 2014, в 18:14

Источник

1

Вам действительно нужно сначала очистить свой код. Вы вложили теги <style>, что, вероятно, влияет на то, почему стили обрабатываются браузером.
jeff 14 фев. 2014, в 17:01
0

Ах да, я знаю, я ждал, пока я закончу весь проект, чтобы очистить его.
user3310999 14 фев. 2014, в 17:05
0

Вам также следует задать 1 вопрос, а не несколько. Некоторые люди могут быть в состоянии ответить на 1 или 2 ваших вопроса, но не на все, и поэтому не могут ответить вообще.
squid314 14 фев. 2014, в 17:07
0

Понял. Я просто думал, что это облегчит.
user3310999 14 фев. 2014, в 17:14

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вам действительно нужно сначала очистить свой код. Вы вложили теги <style>, что, вероятно, влияет на то, почему стили обрабатываются браузером.
Ах да, я знаю, я ждал, пока я закончу весь проект, чтобы очистить его.
Вам также следует задать 1 вопрос, а не несколько. Некоторые люди могут быть в состоянии ответить на 1 или 2 ваших вопроса, но не на все, и поэтому не могут ответить вообще.
Понял. Я просто думал, что это облегчит.

geekster777 · Accepted Answer · 2014-02-14T16-03-00.000Z

Вы захотите поместить свое меню влево, если хотите, чтобы содержимое отображалось в верхней части экрана, а также чтобы ваши слайд-шоу ширины были меньше 1100 пикселей. Затем, если вы хотите, чтобы навигационная панель перестала влиять на ваш контент, содержимое должно быть в своем собственном div. Я бы поместил этот div вправо, а не на отдельные слайд-шоу div. Наконец, чтобы заставить навигатор прокручиваться вместе с вами, вам нужно указать фиксированную позицию или использовать некоторый javascript. В любом случае, похоже, вы захотите использовать раскладку столбцов, поэтому я предлагаю посмотреть, что происходит.

Здесь jsfiddle: http://jsfiddle.net/8GzLv/1/

Я старался не слишком сильно менять код, поэтому css находится в одном из ваших тегов стиля. Но, как я уже упоминал выше, теперь есть div вокруг ваших слайд-шоу с классом контента и div вокруг вашего меню с классом-заполнителем меню.

Но важными частями css, на которые нужно обратить внимание, являются:

.content {
    width:800px;
    overflow:hidden;
}
.menu-placeholder {
    float:left;
    clear:left;
    min-height:250px;
    width:200px;

}
#cssmenu {
    position:fixed;
    top:150px;
}