Как сделать sidebar как у habrahabr.ru?

Question

[Mokhirjon Naimov]

Есть ли готовое решение или статья/урок по этому поводу?

UPD: Элементарные CSS/HTML и капельку JS знаю но это не помогает.
UDP: Просто fixed не решение, там еще есть появляющаяся блок при нажатия на кнопок и некоторые автоматические изменения при изменения высоты.

Comments

[Артур Мудрик]

Это элементарные ХТМЛ/ЦСС и капелька Яваскрипта, для изменения позиции. Ну и вы можете посмотреть в код, как это свёрстано и какие там стили.

[Mokhirjon Naimov]

Элементарные CSS/HTML и капельку JS знаю но это не помогает. И хотелось бы использовать готовое решение или посмотреть урок/статью по этому поводу...

Answer 1

[littleguga]

.sidebar{
position: fixed;
height: 100%;
width: 70px; /* или сколько нужно */
}
.page-content{
padding-left: 80px; /* ширина блока sidebar и сам отступ */
}

Comments

[Mokhirjon Naimov]

Просто fixed не решение, там еще есть появляющаяся блок при нажатия на кнопок и некоторые автоматические изменения при изменения высоты.

[littleguga]

Mokhirzon Naimov: автоматические изменения при изменении высоты - если Вы про стрелку наверх при скролле - загуглите: "scroll to top js" - выведет очень много уроков по теме.
Появляющийся блок, либо jquery, либо css3 animation - если нужна анимация.
А так это просто js
button.onclick{
здесь вы меняете display: none, того меню, что должно появиться на display: block
или можете просто сменить класс(например с hidden-block на visible-block
}

[littleguga]

Mokhirzon Naimov: а так, откройте исходник и смотрите по пунктам. Готовое решение - скопировать с самого Хабра.
Уроки - "jquery menu", "css3 menu" и тд.

[Mokhirjon Naimov]

Спасибо за старание, может быть так и сделаю. Но в данный момент нужен либо готовое решение, либо урок...

[littleguga]

Mokhirzon Naimov: вот урок, например. webkab.ru/plavayushhie-bloki-na-jquery
и еще один:
ruseller.com/lessons.php?rub=2&id=1641
Вам погуглить лень?

[Mokhirjon Naimov]

:) Эти ссылки не по теме!

[littleguga]

Mokhirzon Naimov: эммм, почему не по теме? Я тогда не понимаю, что Вам нужно. Вы говорите меню, как на хабре - я кинул ссылки по этой теме. Да, дизайн другой, но фиксированный блок и выпадающие меню есть, что еще нужно?

[Mokhirjon Naimov]

Извиняюсь может быть у вас стоит IE -6 версий и по этому не понимаете о чем я здесь толкую!

[Mokhirjon Naimov]

Я думаю что fixed дает 10% реализаций от реализаций сделанной в хабре... Но там же еще есть и другие вкусняшки ;)

[littleguga]

Mokhirzon Naimov: вы даже не смотрели? Jquery menu и остальное?
По урокам выше вполне можно сделать sidebar, как на хабре.
Либо сформулируйте свой вопрос нормально.

[littleguga]

Mokhirzon Naimov: О каких "вкусняшках" речь идет? Говорите конкретнее.

[Mokhirjon Naimov]

Спасибо за старание!

Answer 2

[Mokhirjon Naimov]

Сам разобрался через исходников, найденных мною...

Comments

[0348raven]

Если разобрался, то почему не выложил на jsfiddle или codepen дабы другим помочь, полезная практика. А-то по в выдачу вопрос без дела появляется.

[Mokhirjon Naimov]

0348raven сделал по другому, с push'ами (появления меню). Через ~1 месяца удалил, не понравился :)

Answer 3

[Hurenweibel]

https://github.com/codemeow/linuxhabr
Вот реализация хабрастиля для ЛОРа. В том числе, сайдбара. Думаю, поможет.