01.04.2015, 14:27
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
laimas,
Вот это весь код, пункты меню - popup окна, нужно только, чтобы контент по середине не съезжал.
<!-- Header -->
<div id="header" class="skel-layers-fixed">
<div class="top">
<!-- Logo -->
<div id="logo">
<div class="image avatar"><a href="#" id="btn" class="btn_close"><img src="images/avatar.png" alt="" /></a></div>
</div>
<!-- Nav -->
<div class="menu_group">
<div class="menu_group_block"><a rel="sources" href="#"><span style="margin-left: 30px;">ИСТОЧНИКИ</span></a></div>
<div class="popup_sources sources popup">
<a class="close" href="#">Close</a>
<h2>ИСТОЧНИКИ</h2>
<a href="#" class="button_save"/>СОХРАНИТЬ</a>
</div>
<div class="menu_group_block"><a rel="music" href="#"><span style="margin-left: 30px;">МУЗЫКА</span></a></div>
<div class="menu_group_block"><a rel="films" href="#"><span style="margin-left: 30px;">ФИЛЬМЫ</span></a></div>
<div class="menu_group_block"><a rel="authors" href="#"><span style="margin-left: 30px;">АВТОРЫ</span></a></div>
<div class="menu_group_block"><a rel="download" href="#"><span style="margin-left: 30px;">СКАЧАТЬ</span></a></div>
<div class="menu_group_block"><a rel="back" href="#"><span style="margin-left: 30px;">НАЗАД</span></a></div>
<div class="menu_group_block_normal"><a href="#tobeginsearch"><span style="color: #e58627; margin-left: 30px;">НАЧАТЬ ПОИСК</span></a></div>
<div class="menu_group_block_normal"><a href="#comments"><span style="margin-left: 30px;">КОММЕНТАРИИ</span></a></div>
<div class="menu_group_block"><a rel="digest" href="#"><span style="margin-left: 30px;">ДАЙДЖЕСТ</span></a></div>
</div>
</div>
<div class="bottom">
</div>
</div>
<script>
jQuery(function($){
$(document).on('click','.btn_close', function(){
$(this).closest("#header").animate({ width: "90" },300);
$('.menu').fadeOut();
$(this).removeClass('btn_close').addClass('btn_open');
return false;
});
$(document).on('click','.btn_open', function(){
$(this).closest("#header").animate({ width: "20%" },300);
$('.menu').fadeIn();
$(this).removeClass('btn_open').addClass('btn_close');
return false;
});
});
</script>
<!-- Header Right -->
<div id="header-right" class="skel-layers-fixed">
<div class="block-messages">
</div>
</div>
<!-- Top -->
<div id="top">
<div class="toper">
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Time -->
<section id="info" class="info">
</section>
<!-- Content -->
<section id="content" class="content">
<div class="container">
<div class="main-border">
</div>
</div>
</section>
.menu_group {
}
.menu_group_block {
display: block;
font-family: Scada, sans-serif;
font-size: 16pt;
color: #6f7074;
}
.menu_group_block a {
display: inline-block;
width:100%;
padding-top: 15px;
padding-bottom: 15px;
}
.menu_group_block a:hover, .menu_group_block a:focus, .menu_group_block a:active {
width:100%;
background: #595a5d;
color: #cbcdd3;
padding-top: 15px;
padding-bottom: 15px;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
position: fixed;
top: 0;
left: 0;
width: 375px;
height: 100%;
background: #313235;
text-align: left;
-webkit-box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
z-index: 3;
}
#header .top
{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#header .bottom
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
#header .icons
{
font-size: 0.8em;
margin: 0 0 1em 0;
text-align: center;
}
#header .icons a
{
color: #41484c;
-moz-transition: color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out;
transition: color 0.35s ease-in-out;
}
#header .icons a:hover
{
color: #fff;
}
/*********************************************************************************/
/* Header-Right */
/*********************************************************************************/
#header-right
{
position: fixed;
margin-top: 74px;
top: 0;
right: 0;
width: 375px;
height: 100%;
background: #e9ebee;
border-left: 1px solid #d8dadd;
text-align: left;
z-index: 1;
}
#header-right .bottom
{
position: absolute;
right: 0;
bottom: 0;
width: 100%;
}
#header-right .icons
{
font-size: 0.8em;
margin: 0 0 1em 0;
text-align: center;
}
#header-right .icons a
{
color: #41484c;
-moz-transition: color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out;
transition: color 0.35s ease-in-out;
}
#header-right .icons a:hover
{
color: #fff;
}
/*********************************************************************************/
#logo
{
position: relative;
margin: 1.25em 1.25em 1.25em 1.25em;
min-height: 76px;
cursor: default;
}
#logo h1
{
position: relative;
color: #fff;
font-weight: 600;
font-size: 1em;
line-height: 1em;
}
#logo p
{
position: relative;
display: block;
font-size: 0.6em;
color: rgba(255,255,255,0.5);
line-height: 1.25em;
margin: 0.5em 0 0 0;
}
#logo .image
{
position: absolute;
left: 0;
top: 0;
}
#nav
{
font-family: 'Scada', sans-serif;
font-size: 16pt;
}
#nav ul
{
}
#nav ul li
{
}
#nav ul li a
{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
color: #6f7074;
text-decoration: none;
outline: 0;
border: 0;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
#nav ul li a span
{
position: relative;
border-bottom: 1px dashed #6f7074;
font-size: 16pt;
}
#nav ul li a span:before
{
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 1.25em;
line-height: 1.75em;
}
#nav ul li a.active
{
background: #595a5d;
color: #cbcdd3;
}
#nav ul li a.active span
{
border-bottom: 1px dashed #595a5d !important;
}
#nav ul li a.active span:before
{
color: #e27689;
}
/*********************************************************************************/
/* Top */
/*********************************************************************************/
#top
{
width: 100%;
height: 74px;
background-color: #dbdddf;
border-bottom: 1px solid #acaeb0;
position: fixed;
top: 0;
z-index: 2;
}
.toper
{
float: right;
width: 80%;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#main
{
margin-top: 74px;
margin-left: 420px;
margin-right: 420px;
height: 810px;
}
#main > section
{
margin: 0;
overflow: hidden;
padding: 0.5em 0;
text-align: left;
}
#main > section.dark
{
color: #ddd;
color: rgba(255,255,255,0.75);
}
#main > section.dark h2,
#main > section.dark h3,
#main > section.dark h4,
#main > section.dark h5,
#main > section.dark h6
{
color: inherit;
}
#main > section.dark strong,
#main > section.dark a
{
color: #fff;
border-color: inherit;
}
#main > section.dark a:hover
{
border-bottom-color: rgba(255,255,255,0);
}
#main > section.cover
{
padding: 0;
background-size: cover;
background-position: center center;
}
#main > section.info
{
background-color: #e9ebee;
}
#main > section.content
{
background-color: #e9ebee;
}
.main-border {
border-bottom: 1px solid #d8dadd;
padding-top: 10px;
}
|
|
01.04.2015, 14:30
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
Еще CSS
body
{
background: #e9ebee;
}
body.is-loading *
{
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
body,input,textarea,select
{
font-family: 'PT Sans', sans-serif;
font-size: 16pt;
color: #535558;
line-height: 1.75em;
}
h1,h2,h3,h4,h5,h6
{
font-family: Scada, sans-serif;
color: #535558;
text-align: left;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong
{
color: #333;
}
h2
{
font-size: 2em;
letter-spacing: -1px;
}
h2.alt
{
color: #888;
}
h2.alt strong
{
color: #666;
}
h3
{
font-size: 1.5em;
}
header
{
margin: 0 0 2em 0;
}
header > p
{
margin: 1em 0 0 0;
}
header-right
{
margin: 0 0 2em 0;
}
header > p
{
margin: 1em 0 0 0;
}
footer
{
margin: 2em 0 0 0;
}
strong, b
{
font-weight: 300;
color: #666;
}
em, i
{
font-style: italic;
}
a
{
text-decoration: none;
color: inherit;
-moz-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
outline: 0;
}
a:hover
{
}
sub
{
position: relative;
top: 0.5em;
font-size: 0.8em;
}
sup
{
position: relative;
top: -0.5em;
font-size: 0.8em;
}
hr
{
border: 0;
border-top: solid 1px #ddd;
}
blockquote
{
border-left: solid 0.5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
p, ul, ol, dl, table
{
margin-bottom: 0em;
}
br.clear
{
clear: both;
}
/* Sections/Article */
section,
article
{
margin-bottom: 0;
}
section > :last-child,
article > :last-child,
section > .container > :last-child,
article > .container > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.row > section,
.row > article
{
margin-bottom: 0;
}
/* Image */
.image
{
display: inline-block;
border: 0;
}
.image img
{
display: block;
width: 100%;
}
.image.avatar
{
width: auto;
height: auto;
}
.image.avatar img
{
width: auto;
height: auto;
}
.image.fit
{
display: block;
width: 100%;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.left
{
float: left;
margin: 0 2em 2em 0;
}
.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
/* List */
ul
{
}
ul.default
{
list-style: disc;
padding-left: 1em;
}
ul.default li
{
padding-left: 0.5em;
}
ul.icons
{
cursor: default;
}
ul.icons li
{
display: inline-block;
}
ul.icons a
{
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
border: 0;
}
ol
{
}
ol.default
{
list-style: decimal;
padding-left: 1.25em;
}
ol.default li
{
padding-left: 0.25em;
}
|
|
01.04.2015, 14:30
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
Правда больше ничего нет.  |
|
01.04.2015, 14:52
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Такие вещи надо выкладывать в файлах прикрепленных.
Вот вопрос - у вас меню на элементах div с элементами А и SPAN (для чего не понятно, да еще со стилями в них прописанными, хотя это лучше и в CSS вынести) в них. Стиль для меню описывает все ничего.
Если я подключу эту верстку меню и стили для него, то получится ужасная картина (можете у себя проверить это). То есть написать что-то дельное опираясь на это, сложно.
Теперь оказывается что там еще, и еще подключается, а UL описанные может быть это еще и горизонтальное меню верхнее (?).
Если у вас это уже размещено на удаленном сервере, то может быть дать ссылку на него, чтобы можно было готовую структуру взять и опираться на нее. Если нет, то выложить вложением все скрипты которые имеют отношение к этому, стили (в каталогах которые они используют), и результирующий html-код индексной страницы. Иначе вам многое могут советовать, но не факт что это все в итоге будет работать.
|
|
01.04.2015, 20:38
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Давайте так. Вы же смотрели меню по ссылке, которую давал рони. Можно его не подключать, но вот как он работает, эту идею можно взять, ибо она логична в данном случае и визуально показывает "куда спряталось" )
Но есть в вашем меню одна несуразица. У вас кнопка управления меню и элементы меню находятся в одном родительском блоке, который как раз и надо будет убирать за пределы экрана при сворачивании панели.
То есть эта кнопка как и логотип должны быть вне блока меню, их родителем должен быть блок div id="header". А вот меню, а возможно и любые иные элементы, которые могу быть добавлены в панель должны помещаться в общего родителя, например с id='swap". Более того, кнопка управления может быть не просто черточками, а иметь и стрелку указывающую направление свернуть/развернуть. Но что должно быть точно, это размер свернутой панели - ее будет задавать размер кнопки (логотипа) по ширине + отступы слева и справа, то есть чтобы при свернутой панели меню, логотип и кнопка были по центру.
Я посмотрел по ссылке ваш проект, и если говорить откровенно, то многое чего в меню желательно бы изменить, так как поведение его элементы при их выборе либо не видны, либо ведут себя странно.
Но вы измените структуру кода хотя бы того, что я написал выше - кнопка управления это одно, а все иное что надо скрывать, это в отдельном блоке. И тогда управление панелью будет очень простое.
Последний раз редактировалось laimas, 01.04.2015 в 20:46.
|
|
02.04.2015, 11:25
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
1) У меня разрешение Full HD, это 1920 х 1080, и уже для него размер шрифта слишком большой. Переключаясь в более низкое разрешение, все будет выглядеть еще более крупным. А пункт Период содержит форму, которая не открывается в popup, а непосредственно в меню, следовательно последний пункт меню при моем разрешение уже на границе "не видно" находится. При меньшем разрешении значит вообще будут скрыты последние элементы меню. Может быть все таки подумать над размером шрифта, как и над отступами между пунктами меню, которые также слишком велики.
2) Кнопка Close, которая у вас в коде здесь показана, оказывается относится к форме, а кнопка свернуть/развернуть панель, это логотип. Значит переносить нужно логотип.
3) <div class="bottom"></div> - что здесь, что на сервере, этот элемент пуст, и если он не используется значит его удалить.
4) Что нужно сделать. Вот html-структура панели как она выглядит на сайте (сокращение для повторяемых блоков и без вложенной формы):
<div class="skel-layers-fixed" id="header" style="backface-visibility: hidden; transition: -moz-transform 0.5s ease 0s, opacity 0.5s ease 0s;">
<div class="top">
<div id="logo">
<div class="image avatar"><img /></div>
</div>
<div class="link_group">
<div class="link_group_block"><a href="#" rel="period" class=""><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ПЕРИОД</span></a></div>
<div class="link_group_block"><a href="#" rel="objects"><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ОБЪЕКТЫ</span></a></div>
.....
</div>
</div>
<div class="bottom"></div>
</div>
style="backface-visibility: hidden; transition: -moz-transform 0.5s ease 0s, opacity 0.5s ease 0s;" - пользы от этого не видно никакой. Более того, боковая панель имеет тень справа, есть ли от этого польза или нет, это вопрос спорный, но вот все popup не имеют теней, хотя их оттенить было куда более полезным.
В каком направлении нужно изменить структуру боковой панели и стили. Если элементы SPAN в элементах меню действительно нужны, то удалить у них прописанные в тегах стили
border-bottom: 1px dashed #595a5d; margin-left: 30px;
перенеся в border-bottom: 1px dashed #595a5d; в CSS, а margin-left: 30px; удалить вообще. Отступ слева 30px пунктам меню должен определять родительский элемент <div class="link_group">, в его стилях этот отступ и нужно прописать. Вот такая должна быть структура после изменений:
<div class="skel-layers-fixed" id="header">
<div id="logo">
<div class="image avatar"><img /></div>
</div>
<div id="swap">
<div class="link_group">
<div class="link_group_block"><a href="#" rel="period"><span>ПЕРИОД</span></a></div>
<div class="link_group_block"><a href="#" rel="objects"><span>ОБЪЕКТЫ</span></a></div>
.....
</div>
<div class="bottom"></div>
</div>
</div>
Здесь предполагается, что использутеся <div class="bottom"> и возможно иные блоки. Все блоки панели, которые при ее изменении перемещаются помещены в родительский блок <div id="swap">.
Внешние отступы слева в 30рх у элементов, о которых говорилось выше, можно и не задавать каждому из элементов родителя <div id="swap">, а задать такой отступ, но внутренний <div id="swap">.
Элемент <div id="swap"> и его дочерние элементы, как то <div class="link_group">, <div class="bottom"> и возможно другие, не должны иметь абсолютного позиционирования, как это указано у вас, этого совсем не требуется, да и усложняет изменения/дополнения в боковой панели. Сдвигать <div id="swap"> можно управляя его внешним отступом слева.
Подумайте, измените. А разобравшись с панелью, будете разбираться с остальным, чего у вас не так, а оно у вас есть, включая и ошибки.
Последний раз редактировалось laimas, 02.04.2015 в 12:11.
|
|
02.04.2015, 21:16
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Значит так:
id=logo - заменить на class=logo, и код этого блока заменить на этот:
<div class="logo">
<div id="btn-swap" class="image avatar">
<img src="filin_files/avatar.png" alt="">
</div>
</div>
в файле style.css заменить #logo на .logo, и добавить для изображения стиль курсора:
.logo .image
{
position: absolute;
left: 0;
top: 0;
cursor: pointer
}
Найти на странице блок скрипта:
<script>
jQuery(function($){
$(document).on('click','.btn_close', function(){
$(this).closest("#header").animate({ width: "90" },300);
$('.link_group').fadeOut();
$(this).removeClass('btn_close').addClass('btn_open');
return false;
});
$(document).on('click','.btn_open', function(){
$(this).closest("#header").animate({ width: "20%" },300);
$('.link_group').fadeIn();
$(this).removeClass('btn_open').addClass('btn_close');
return false;
});
});
</script>
и удалить его. А блоки скриптов:
<script>
$(function() {
var $but = $(".link_group_block a"),
$blocks = $(".popup");
$but.each(function(i, elem) {
var $el = $(elem), rel = '.'+$el.attr('rel');
$el.click(function() {
$but.not($el).removeClass("active");
$el.toggleClass("active");
$blocks.each(function(j, el) {
$(el)["fade" + ($(el).is(rel) ? "Toggle" : "Out")]();
});
})
});
$('html, .close').click(function (event) {
if ($(event.target).closest('.link_group, .popup' ).size() && !$(event.target).is('.close')) return;
$but.filter('.active').click()
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-dynamic').scrollbar();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-popup').scrollbar();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-popup-mini').scrollbar();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-popup-minimum').scrollbar();
});
</script>
заменить на это:
<script>
var pW, //ширина панели меню
pH, //ширина свернутой панели
pD; //режим панели меню
$(function() {
var $but = $(".link_group_block a"),
$blocks = $(".popup");
$but.each(function(i, elem) {
var $el = $(elem), rel = '.'+$el.attr('rel');
$el.click(function() {
$but.not($el).removeClass("active");
$el.toggleClass("active");
$blocks.each(function(j, el) {
$(el)["fade" + ($(el).is(rel) ? "Toggle" : "Out")]();
});
})
});
$('html, .close').click(function (event) {
if ($(event.target).closest('.link_group, .popup' ).size() && !$(event.target).is('.close')) return;
$but.filter('.active').click()
});
$('div.scrollbar-dynamic,div.scrollbar-popup,div.scrollbar-popup-mini,div.scrollbar-popup-minimum').scrollbar();
//управление панелью меню
var pO = $('#btn-swap').click(function() {
pD ^= 1; //изменить направление
if(!pW) { //получить параметры
pW = pO.width(); //получит ширину панели
pH = pW - 100; //величина на которую сворачивается панель
$('#swap').css({width : pW}) //задать ширину родительскому блоку элементов меню
}
pO.stop()
.animate({width : pW - pH * pD}, 400) //сворачиваем/разворачиваем панель
.find('#swap')
.stop()
.animate({marginLeft : -pW * pD}, 200) //смещение элементов панели, скорость анимации в два раза выше, чем у панели
}).closest("#header"); //получаем панель меню
});
</script>
Я не проверял все под различными разрешениями, поэтому ширина панели меню рассчитывается при пером его изменении, а не берется фиксированной. Если же она у вас постоянна при любых разрешениях, то можно это удалить, и прописать непосредственную величину в переменной.
Ширина же для блока swap указывается в пикселях для того, чтобы при смещении его за пределы экрана, не оставалось "хвостов" от пунктов меню.
Величина ширины свернутого меню равная 100, это ширина изображения + отступы слева/справа блока logo. Проверял на двух разрешениях, отступ остается постоянным. Если же он будет изменяться, то ширину свернутой панели нужно будет рассчитывать.
Последний раз редактировалось laimas, 02.04.2015 в 21:40.
|
|
02.04.2015, 21:40
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
|
laimas,
ОГРОМНЕЙШЕЕ СПАСИБО!)))
Все изменила и вроде работает)) Только вот контент не центрируется, а остается на месте в отличии от демо этого скрипта(( Это легко исправить?
|
|
02.04.2015, 21:53
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Контент - имеется ввиду сообщения?
Ну вообще-то данный код не затрагивает контент, то что сказал заменить, так это у вас монотонно прописывалось подключение плагина scroll (кстати у вас ошибки в скриптах где-то, и как раз связанные с прокруткой).
То что изменили стили и заменили id=logo на class=logo, а это кроме самой панели где-то еще используется, то вполне возможно что в этом причина. Можно найти в редакторе такие места и изменить, но если это затруднительно, то верните назад, то есть опять укажите id=logo для блока (но не меняя его код), и в стилях тоже.
Если проблема не исчезнет, то не могу сказать с чем она связана. Это надо разбираться, но с таким кодом как у вас, это ....
|
|
02.04.2015, 21:56
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Посмотрел на сервере после изменений - не понял, что именно не центрируется?
|
|
|
|
