Раньше довести идею до представляемой в воображении не удалось, т.к. не сообразила, что могу подключить к ноуту монитор 20" и отрабатывать нюансы при разных разрешениях и соотношениях сторон экрана, чтобы ничего нигде не смещалось и всегда оставалось на своём месте. Теперь же идея воплощена в том виде, в каком мне хотелось. И работает этот эффект так, как будет показано на скринах ниже.
В неактивном состоянии:
После наведения мышки к верхней границе окна из любой позиции на ленте:
Особенность реализации состоит в том, что в меню отключено название дневника. Но, его можно подключить. Если возникнет необходимость, отдельным постом потом расскажу как это сделать без потерь в эффектах.
Ну что, код:
Теперь по коду основное:
— 1 — в селекторе #side .bordered в атрибуте «position:fixed;» прописано фиксированное положение всего блока меню.
- В «z-index: 1000;» - блок должен быть всегда выше всех остальных элементов на странице, т.е. при прокрутке ленты ничто не должно на него наезжать и закрывать.
- В группе свойств «margin: 0 auto !important; width: 1100 height: 130 top:0» - позиционирование блока по центру окна браузера.
- В «background: url('/userdir/1/8/0/9/1809297/78053862.png') no-repeat; background-position: top center;» - фоновая картинка всего блока, вместо сплошной заливки цветом.
- В группе «-webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s;» - время, через которое после наведения мыши должно плавно возникнуть меню со всеми подпунктами.
- В группе «-moz-opacity:0; opacity:0; -webkit-opacity:0; opacity:0; filter:alpha(opacity=0);» - меню не видно, пока не будет наведена мышка. А дальше, после наведения мыши, работает следующий селектор.
— 2 — #side .bordered:hover, в котором в свойствах «-moz-opacity:1; opacity:1 !important; filter:alpha(opacity=100);» меню проявляется.
— 3 — строкой #side h1 {display: none; } - отключено отображение названия дневника. Фишка такая )
— 4 — Дальше в блоках кода, в селекторах: #authorName (имя автора дневника, совсем не обязательно, чтобы точно по нику), #thisDiaryOwner (пункт меню "Записи"), #myDiaryLinks (пункт меню "Мой дневник"), #globalLinks (пункт меню "Главное меню") - прописаны фоновые картинки под ссылки на сами заголовки меню, фоны (картинка - флаг) в этих меню, эффекты при наведении мыши, позиционирование.
- Также в свойствах к этим селекторам прописаны высоты строк элементов списка меню, отступы между ними, чтобы они вписались в высоту фона меню.
- Тут стоит отметить, что многие ссылки из блока меню просто отключены за практической ненадобностью, поскольку, как показывает мой личный опыт, ими со страницы своего дневника редко пользуется. Остальное можно сделать и через профиль пользователя. В общем, так страница дневника автора не перегружена лишними элементами.
— 5 — В .menuSection - прописано отображение ссылок во всех пунктах меню и эффекты к ним при наведении мышки.
— 6 — В селекторе #iAmQuit b a прописан код для кнопки "Выход".
- В «z-index: 1000;» - блок должен быть всегда выше всех остальных элементов на странице, т.е. при прокрутке ленты ничто не должно на него наезжать и закрывать.
- В группе свойств «margin: 0 auto !important; width: 1100 height: 130 top:0» - позиционирование блока по центру окна браузера.
- В «background: url('/userdir/1/8/0/9/1809297/78053862.png') no-repeat; background-position: top center;» - фоновая картинка всего блока, вместо сплошной заливки цветом.
- В группе «-webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s;» - время, через которое после наведения мыши должно плавно возникнуть меню со всеми подпунктами.
- В группе «-moz-opacity:0; opacity:0; -webkit-opacity:0; opacity:0; filter:alpha(opacity=0);» - меню не видно, пока не будет наведена мышка. А дальше, после наведения мыши, работает следующий селектор.
— 2 — #side .bordered:hover, в котором в свойствах «-moz-opacity:1; opacity:1 !important; filter:alpha(opacity=100);» меню проявляется.
— 3 — строкой #side h1 {display: none; } - отключено отображение названия дневника. Фишка такая )
— 4 — Дальше в блоках кода, в селекторах: #authorName (имя автора дневника, совсем не обязательно, чтобы точно по нику), #thisDiaryOwner (пункт меню "Записи"), #myDiaryLinks (пункт меню "Мой дневник"), #globalLinks (пункт меню "Главное меню") - прописаны фоновые картинки под ссылки на сами заголовки меню, фоны (картинка - флаг) в этих меню, эффекты при наведении мыши, позиционирование.
- Также в свойствах к этим селекторам прописаны высоты строк элементов списка меню, отступы между ними, чтобы они вписались в высоту фона меню.
- Тут стоит отметить, что многие ссылки из блока меню просто отключены за практической ненадобностью, поскольку, как показывает мой личный опыт, ими со страницы своего дневника редко пользуется. Остальное можно сделать и через профиль пользователя. В общем, так страница дневника автора не перегружена лишними элементами.
— 5 — В .menuSection - прописано отображение ссылок во всех пунктах меню и эффекты к ним при наведении мышки.
— 6 — В селекторе #iAmQuit b a прописан код для кнопки "Выход".
Если будут вопросы по нюансам, прошу в комменты ) Пока всё.
Так как идея фиксированного меню в нижней части экрана уже реализована до меня (видела когда-то дневник с таким эффектом), заняться пока нечем, кроме как попробовать заставить себя разобраться с этими капризными пунктами списка в "Темах записей" своего днева. Да пока желания нет.