Вертикальное меню для сайта

SurPaul · January 8, 2012

помогите пожалуйста, как сделать меню как в одноклассниках (чтобы оно оставалось при прокрутке страницы)?

"position: fixed" не помогает, отображается неправильно, криво.

пытался сделать так:


<div style="width: 100%; height: 51px">
<!-- Меню -->
</div>
<div style="width: 500px; height: 100%; overflow: auto">
<!-- Контент -->
</div>

но что если на сайт зайдёт человек, у которого дисплей с расширением например 1600х900? будет пустое место под вторым блоком, вообще отображаться будет неправильно. нашёл в инете JS-скрипт, который изменяет высоту блока в зависимости от расширения дисплея, поставил, но он не работает у меня почему-то.

Arantir · January 9, 2012

А почему второй блок имеет ширину всего 500px? Почему бы не 100%?

Еще важное значение имеет вложенность элементов. Попробуйте поставить меню где-то в самом верху или в самом низу корневого элемента сайта (ну то есть body или какого-то div'a, которым вы, возможно, заменили функции body).

А потом просто вот так:


#menu {
  position: fixed; /* Не скроллится со страницей */
  top: 0px; /* Вверху страницы, ну по желанию можно с любой стороны прилепить. */
  z-index: 100; /* Поверх всех элеметов */
  }

По идее на положение меню уже ничего не повлияет и оно всегда будет вверху страницы.

Или уточните, что вы имели ввиду под "неправильно и криво". Откровенно скажу, из кода двух блоков проблемы не видно.

Edited January 9, 2012 by Arantir

SurPaul · January 9, 2012

А почему второй блок имеет ширину всего 500px? Почему бы не 100%?

если поставлю 100% - будет вот так:


#menu {
  position: fixed; /* Не скроллится со страницей */
  top: 0px; /* Вверху страницы, ну по желанию можно с любой стороны прилепить. */
  z-index: 100; /* Поверх всех элеметов */
  }

подумал что получится, заменил код, но всё равно не работает, скроллится... странно...

Или уточните, что вы имели ввиду под "неправильно и криво". Откровенно скажу, из кода двух блоков проблемы не видно.

вот так "неправильно и криво":

поставил "width: 100%" (всё равно не правильно, но уже лучше):

а должно быть вот так:

и ещё какой-то глюк тут... в таблице стилей добавил "position: fixed", открываю страницу которая должна была измениться, но там всё тоже самое, изменяется только если в html-коде изменить (...<div id="menu" style="position: fixed">...). хотя таблица стилей подключена к странице и названия блоков правильные

Arantir · January 9, 2012

Судя по скринах, проблема не в самом меню, а во вложенных в него блоках (кнопках).

Покажите код меню, тогда хоть будет видно, где проблема. А то, наверное, проще с ноля меню такое написать, чем тут на пальцах гадать.

и ещё какой-то глюк тут... в таблице стилей добавил "position: fixed", открываю страницу которая должна была измениться, но там всё тоже самое, изменяется только если в html-коде изменить (...<div id="menu" style="position: fixed">...). хотя таблица стилей подключена к странице и названия блоков правильные

Ошибок в коде CSS нет? Может все так криво из-за какой-то небольшой ошибки? Если после изменения какой-то свойства ничего не поменялось, значит браузер его не прочел из-за ошибки или оно было поставлено еще раз где-то ниже по коду.

SurPaul · January 9, 2012

Судя по скринах, проблема не в самом меню, а во вложенных в него блоках (кнопках).
Покажите код меню, тогда хоть будет видно, где проблема. А то, наверное, проще с ноля меню такое написать, чем тут на пальцах гадать.


<html>
<head>
<title>Menu</title>
<style>
h1 { font-size: 23pt; font-family: Comic Sans MS; background:url(http://i29.fastpic.ru/big/2012/0109/d2/030db595cdc6d1898def9cd70e3959d2.jpg) repeat-x; color: #fff; height: 51px; text-align: center }
#menu { width: 100%; height: 51px; margin: 0px; padding: 0px }
#menu ul, li { font-family: Lucida Sans Unicode }
#menu ul { list-style:none }
#menu li { list-style:none; display:block; float:left; line-height:51px; border:solid #636363; border-width:0 2px 0 2px; background:url(http://i29.fastpic.ru/big/2012/0109/d2/030db595cdc6d1898def9cd70e3959d2.jpg) repeat-x; height:51px; margin:0 1px 0 0 }
#menu li a { display:block; float:left; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; text-decoration:none; padding:0 25px; height:51px }
#menu li a:hover { color:#fff; background:url(http://i29.fastpic.ru/big/2012/0109/53/cceae00136184bd0928925368293d153.jpg) repeat-x }
#menu li a.current { display:block; float:left; background:url(http://i29.fastpic.ru/big/2012/0109/53/cceae00136184bd0928925368293d153.jpg) repeat-x; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; text-decoration:none; padding:0 25px }
#menu li a:hover.current { color:#fff }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" class="current">Главная</a></li>
<li><a href="#">Информация</a></li>
<li><a href="#">Фото</a></li>
<li><a href="#">Чат</a></li>
</ul>
<h1>Название</h1>
</div>
</body>
</html>

и ещё какой-то глюк тут... в таблице стилей добавил "position: fixed", открываю страницу которая должна была измениться, но там всё тоже самое, изменяется только если в html-коде изменить (...<div id="menu" style="position: fixed">...). хотя таблица стилей подключена к странице и названия блоков правильные
Ошибок в коде CSS нет? Может все так криво из-за какой-то небольшой ошибки? Если после изменения какой-то свойства ничего не поменялось, значит браузер его не прочел из-за ошибки или оно было поставлено еще раз где-то ниже по коду.

ошибок нет

Arantir · January 9, 2012

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

В вашем случае пришел к выводу, что проще всего засунуть меню в отдельный фиксированный слой.


.fixed-layer {
  width: 100%;
  position: fixed;
  }


<div class="fixed-layer">
  <div id="menu">
    <ul>
      <li><a href="#" class="current">Главная</a></li>
      <li><a href="#">Информация</a></li>
      <li><a href="#">Фото</a></li>
      <li><a href="#">Чат</a></li>
    </ul>
  <h1>Название</h1>
  </div>
</div>

А для проверки:


body {
  height: 1600px;
}

И покрутить вверх-вниз. Меню всегда вверху страницы при прокрутке и соответствует нужному внешнему виду. По крайней мере у меня все именно так.

Устраивает такое решение?

Edited January 9, 2012 by Arantir

SurPaul · January 9, 2012

Все наперекосяк делается, очевидно, из-за того, что меню сделано списком... Тоже недавно делал так и на вид было совсем не то, что ожидалось, и, на первый взгляд, непонятно почему.
В вашем случае пришел к выводу, что проще всего засунуть меню в отдельный фиксированный слой.
.fixed-layer {
  width: 100%;
  position: fixed;
  }
<div class="fixed-layer">
  <div id="menu">
    <ul>
      <li><a href="#" class="current">Главная</a></li>
      <li><a href="#">Информация</a></li>
      <li><a href="#">Фото</a></li>
      <li><a href="#">Чат</a></li>
    </ul>
  <h1>Название</h1>
  </div>
</div>
А для проверки:
body {
  height: 1600px;
}
И покрутить вверх-вниз. Меню всегда вверху страницы при прокрутке и соответствует нужному внешнему виду. По крайней мере у меня все именно так.
Устраивает такое решение?

уже намного лучше. а как сделать чтобы меню было сверху (сейчас отступ есть небольшой, по крайней мере у меня)?

и "контент" "спрятался" за меню. как это убрать?

Arantir · January 9, 2012

(сейчас отступ есть небольшой, по крайней мере у меня)

Горизонтальные меню, наверное, не стоит делать списком. Список по природе вертикальный. Всякие сдвиги картинок - извращенные попытки браузера показать список.

Но если проблема только в отступе:

h1 { 
  margin-top: -24px;

или (в смысле, не оба сразу):

.fixed-layer {
  margin-top: -29px;

А еще отступ слева можно убрать:


body {
  margin: 0px;
  /* ... */
}

.fixed-layer {
  margin-top: -20px;
  /* ... */
  }

и "контент" "спрятался" за меню. как это убрать?

<div class="fixed-layer">
***
</div>
<div id="content">Текст...</div>

#content {
  padding-top: 51px;
 /* width: 100%;
  height: 500px; */
  }

Лучше меню сразу сделайте div'ами, вместо li { display:block }. Блок ведь останется блоком, а вот непонятных отступов не будет.

Edited January 9, 2012 by Arantir

SurPaul · January 9, 2012

спасибо большое! получилось!

Sign In

Вертикальное меню для сайта

Question

SurPaul

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Arantir

Link to comment

Share on other sites

SurPaul

Link to comment

Share on other sites

Arantir

Link to comment

Share on other sites

SurPaul

Link to comment

Share on other sites

Arantir

Link to comment

Share on other sites

SurPaul

Link to comment

Share on other sites

Arantir

Link to comment

Share on other sites

SurPaul

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information