Блог

Я пытаюсь создать панель навигации с фиксированным положением, которая не является полной шириной окна и не привязана к окну браузера. Таким образом, при максимальной ширине 1200 пикселей она останавливается и остается там, а не следует за правой границей браузера, а ниже 1200 пикселей она прикрепляется к правой части браузера, чтобы соответствовать окну.

Приведенный ниже код обеспечивает то, что я только что описал, за исключением того, что он не позволяет пользователю нажимать на ссылку, которая находится рядом с панелью навигации «кликабельно». Это из max-width:1200px -за того, что и width: 100% что заставляет мою панель навигации перекрывать что-либо еще на этой странице, и я хотел бы это как-то исправить.

 #navigation {
  position: fixed;
  max-width: 1200px;
  width: 100%;
  z-index: 0;
}
#navigation svg {
  float: right;
}
#navigation svg polyline {
  fill: #F7F7F7;
  stroke: #B9D7D9;
  stroke-width: 2;
}
#navigation ul {
  position: absolute;
  top: 3px;
  right: 0.8rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}
#navigation li {
  float: left;
}  

 <div id="navigation">
  <svg height="50" width="400">
    <polyline points="0,0 400,0 400,50 70,50 0,0" />
  </svg>
  <ul>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<a href="#">Clickable</a>  

Вот что я хочу, чтобы это произошло в окне 1200px:

Окно размером менее 1200 пикселей:

рассматривали ли вы возможность использования запросов @media для разных макетов в зависимости от размера вашего экрана? см. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Возможно, этот css-код может решить вашу проблему

 @media only screen and (min-width: 1201px) {
    #navigation {
        width:80%;
    }

@media only screen and (max-width: 1200px) {
    #navigation{
        width:100%;
    }
  

clickable Ссылка не кликабельна, потому что она z-index находится ниже #navigations .
Чтобы исправить это, вы можете использовать следующий стиль (я использую класс .clickable в этом примере).
Кроме того, для правильного центрирования на экранах шириной более 1200 пикселей вы можете добавить еще немного позиционирования, чтобы #navigation правильно его центрировать.

 #navigation {
  position: fixed;
  max-width: 1200px;
  width: 100%;
  z-index: 0;
  
  /* Center #navigation (dont forget vendor prefixes for transform)*/
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
#navigation svg {
  float: right;
}
#navigation svg polyline {
  fill: #F7F7F7;
  stroke: #B9D7D9;
  stroke-width: 2;
}
#navigation ul {
  position: absolute;
  top: 3px;
  right: 0.8rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}
#navigation li {
  float: left;
}

.clickable{
  display: inline-block;
  position: relative;
  z-index: 1;
}  

 <div id="navigation">
  <svg height="50" width="400">
    <polyline points="0,0 400,0 400,50 70,50 0,0" />
  </svg>
  <ul>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<a href="#" class="clickable">Clickable</a>  

Мое решение этой проблемы. Поскольку моя максимальная ширина составляет 1200 пикселей, а ширина навигации — 400 пикселей, мне нужно переместить ее вправо на 800 пикселей.

Если экран шире 1200 пикселей, я нажимаю панель навигации на 800 пикселей вправо, а если экран меньше 1200 пикселей вправо: 0, что означает, что панель навигации будет прикреплена к браузеру.

 #navigation{
    position:fixed;
    z-index: 0;
    right: 0;
}

@media only screen and (min-width: 1200px) {
    #navigation{
        margin-left:800px!important;
        right: initial;
    }
}