Скрывающееся меню. Ищу помощи!
Вложений: 2
Всем привет. Почти написала сайт и столкнулась с проблемой, решение которой не нашла в интернете. Суть задачи состоит в том, чтобы при нажатии на верхнюю кнопку у меню, оно скрывалось до определенного размера. Ничего подобного так и не встретила в уроках. Помогите! :cray:
Вот код меню: <div id="header" class="skel-layers-fixed"> <div class="top"> <!-- Logo --> <div id="logo"> <div class="image avatar"><img src="images/avatar.png" alt="" /></div> </div> <!-- Nav --> <div class="menu"> <div class="menu_block"><a rel="menu1" href="#">КНОПКА МЕНЮ</span></a></div> </div> <div class="menu_block"><a rel="menu2" href="#">КНОПКА МЕНЮ</span></a></div> <div class="menu_block"><a rel="menu3" href="#">КНОПКА МЕНЮ</span></a></div> <div class="menu_block"><a rel="menu4" href="#">КНОПКА МЕНЮ</span></a></div> <div class="menu_block"><a rel="menu5" href="#">КНОПКА МЕНЮ</span></a></div> <div class="menu_block"><a rel="menu6" href="#">КНОПКА МЕНЮ</span></a></div> <div class="menu_block"><a rel="menu7" href="#">КНОПКА МЕНЮ</span></a></div> </div> </div> <div class="bottom"> </div> </div>
#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;
}
#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;
}
|
Прошу закрыть одну из тем, заглючил интернет, случайно копию сделала.
|
Может сначала верстку меню и его стиль сделать?
|
|
laimas,
Верстка готова, скинула только основной код, это же вроде осуществимо средствами js? |
Infinity178,
Да, именно такого, большое спасибо!!)) |
Snezhana, сделать можно все или почти все, но вы показываете html-структуру (причем со странностями) на div, а стили совсем для иного. И что прикажете? А управлять шириной родителя посредством JS можно просто:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid #f00;
}
</style>
<script>
$(function() {
var o = $('#nav').find('li').click(function(){
o.animate({width : o.width()<300 ? 300 : 100});
}).end();
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li>111</li>
<li>222</li>
</ul>
</div>
</body>
</html>
|
|
Реализовала, большое спасибо, только при скрытии меню, контент остается неподвижен, в чем может быть беда?
|
1. Смотря как реализована анимация
2. HTML структура 3. Контент где? |
Infinity178,
Анимация сделана по вашему примеру, контент находится справа от меню: <div id="main"> <section id="content" class="content"> <div class="container"> <div class="main-border"> </div> </div> </section> </div>
#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;
}
|
Не делайте по примеру Infinity178, подключите уж лучше то, что по ссылке дал рони.
|
laimas,
Я просто не совсем поняла как подключить правильно этот скрипт, чтобы кнопка скрытия находилась слева, а не справа. И при скрытии там же оставалась, пример не совсем верный.( |
Ну так вы скачайте его, и там уж точно будет демо версии, возможно даже несколько, если этот плагин реализует различные версии меню (по стилю, положению и т.п.) В этих демо версиях все и будут прописано, как подключать, как вызывать.
Если же с этим трудности, и нужно более понятное и простое, то еще раз - представьте полностью структуру своего меню, стилей его описывающих, а также структуру и стили других элементов, которые так или иначе будут подвергаться этим изменениям. Иначе не избежать вопросов в последствии - "почему я, а оно...?" |
Вот готовый, рабочий пример по проще..
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://www.onextrapixel.com/examples/touch-swipe/jquery.touchSwipe.min.js"></script>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container.open-sidebar {
left: 240px;
}
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar {
background: #DF314D;
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin: 0;
}
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: white;
text-decoration: none;
display: block;
border-bottom: 1px solid #C9223D;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
background: #C9223D;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content{
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
font-weight: 100;
}
.main-content .content p{
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: #DF314D;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
margin-bottom: 0;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$("[data-toggle]").click(function() {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers){
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<a href="#" data-toggle=".container" id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="content">
<h1>Заголовок нашей страницы</h1>
<p>JavaScript — прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript[~ 1].
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке[~ 2][4].
Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation[5].</p>
</div>
</div>
</div>
</body>
</html>
|
laimas,
Вот подробный код. Большое спасибо за помощь.
<!-- 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;
}
|
Infinity178,
Хорошо, только дело в том, что меню изначально должно быть открытым, а потом при клике - закрываться, на такой пример я уже натыкалась. :( |
|
Миледи, то что вы опять показали ну никак не вяжется со стилями указанными. :)
|
Snezhana, поменяйте стили
|
Snezhana, меняем стили положение LEFT пример:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://www.onextrapixel.com/examples/touch-swipe/jquery.touchSwipe.min.js"></script>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
left: 240px;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container.open-sidebar {
left: 0;
}
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar {
background: #DF314D;
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin: 0;
}
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: white;
text-decoration: none;
display: block;
border-bottom: 1px solid #C9223D;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
background: #C9223D;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content{
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
font-weight: 100;
}
.main-content .content p{
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: #DF314D;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
margin-bottom: 0;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$("[data-toggle]").click(function() {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers){
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<a href="#" data-toggle=".container" id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="content">
<h1>Заголовок нашей страницы</h1>
<p>JavaScript — прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript[~ 1].
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке[~ 2][4].
Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation[5].</p>
</div>
</div>
</div>
</body>
</html>
|
laimas,
Infinity178, Вот, вроде все в порядке. :) Переделала правильно код. Infinity178, Тут еще дело в том, что кнопка выходит за границы Меню и полностью скрывает это самое меню, а у меня другая беда.(( Нужно чтобы кнопка была в меню и оставляла ту самую часть меню, вот как раз подобного я в гугле и не нашла |
Infinity178, не надо писать лишнего, иначе дама окончательно запутается. :)
То что вы показали, не учитывает много, возможно даже того, чего нет, но может быть. И ваш код ну никак не отвечает этому. |
laimas,
Дело в том, что еще к сайту подключен js для адаптивной верстки. Вот код.
(function($) {
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'css/style.css', containers: 1050, grid: { gutters: 40 }, viewport: { scalable: false } },
'wide': { range: '900-1600', href: 'css/style-wide.css', containers: 870, grid: { gutters: 40 } },
'normal': { range: '768-1366', href: 'css/style-normal.css', containers: 960, grid: { gutters: 40 } },
'narrow': { range: '800-1280', href: 'css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
'narrower': { range: '-960', href: 'css/style-narrower.css', containers: '100%', grid: { gutters: 20 } },
'mobile': { range: '-736', href: 'css/style-mobile.css', containers: '100%!', grid: { collapse: true } }
},
plugins: {
layers: {
config: {
mode: 'transform'
},
sidePanel: {
hidden: true,
breakpoints: 'narrower',
position: 'top-left',
side: 'left',
animation: 'pushX',
width: 240,
height: '100%',
clickToHide: true,
html: '<div data-action="moveElement" data-args="header"></div>',
orientation: 'vertical'
},
sidePanelToggle: {
breakpoints: 'narrower',
position: 'top-left',
side: 'top',
height: '4em',
width: '5em',
html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>'
}
}
}
});
$(function() {
var $window = $(window),
$body = $('body');
// Disable animations/transitions until the page has loaded.
$body.addClass('is-loading');
$window.on('load', function() {
$body.removeClass('is-loading');
});
// CSS polyfills (IE<9).
if (skel.vars.IEVersion < 9)
$(':last-child').addClass('last-child');
// Forms (IE<10).
var $form = $('form');
if ($form.length > 0) {
$form.find('.form-button-submit')
.on('click', function() {
$(this).parents('form').submit();
return false;
});
if (skel.vars.IEVersion < 10) {
$.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
$form.n33_formerize();
}
}
// Scrolly links.
$('.scrolly').scrolly();
// Nav.
var $nav_a = $('#nav a');
// Scrolly-fy links.
$nav_a
.scrolly()
.on('click', function(e) {
var t = $(this),
href = t.attr('href');
if (href[0] != '#')
return;
e.preventDefault();
// Clear active and lock scrollzer until scrolling has stopped
$nav_a
.removeClass('active')
.addClass('scrollzer-locked');
// Set this link to active
t.addClass('active');
});
// Initialize scrollzer.
var ids = [];
$nav_a.each(function() {
var href = $(this).attr('href');
if (href[0] != '#')
return;
ids.push(href.substring(1));
});
$.scrollzer(ids, { pad: 200, lastHack: true });
});
})(jQuery);
|
>Вот, вроде все в порядке.
Переделала правильно код. Нет, не в порядке. Посмотрите на верстку - первый элемент меню (хотя это должна быть кнопка не меню) имеет своего родителя, а еще и общего с остальными пунктами. То есть все разрознено. Стили же описывают не div, а li элементы, и совсем другого родителя. Мало того, а как вы будете поступать, если в этот блок навигации потребуется добавить еще блоки или элементы, но не входящие в меню? Будет писать под каждый свой скрипт управления? |
laimas,
Еще skel.min.js и skel-layers.js |
laimas,
Так, сейчас все пересмотрю и перепроверю |
laimas, тут принцип работы бокового меню. Как раз без излишек.
Подогнать под свои нужды уже дело индивидуальное. |
Из этого кода к адаптивной верстке отношение имеет небольшая часть его. Управление же левой панелью никак не должно зависеть от кода выше, исключая только ширину этой панели, которая может изменяться в зависимости от разрешения экрана.
Все остальное я написал выше, в чем у вас несостыковки. |
laimas, тут принцип работы бокового меню. Как раз без излишек.
Подогнать под свои нужды уже дело индивидуальное. Как раз, если о излишках, то они у вас есть, все ваше можно и одной строкой заменить. Но дело не в этом, а в том, чем управлять. |
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;
}
|
Еще 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;
}
|
Правда больше ничего нет. :(
|
Такие вещи надо выкладывать в файлах прикрепленных.
Вот вопрос - у вас меню на элементах div с элементами А и SPAN (для чего не понятно, да еще со стилями в них прописанными, хотя это лучше и в CSS вынести) в них. Стиль для меню описывает все ничего. Если я подключу эту верстку меню и стили для него, то получится ужасная картина (можете у себя проверить это). То есть написать что-то дельное опираясь на это, сложно. Теперь оказывается что там еще, и еще подключается, а UL описанные может быть это еще и горизонтальное меню верхнее (?). Если у вас это уже размещено на удаленном сервере, то может быть дать ссылку на него, чтобы можно было готовую структуру взять и опираться на нее. Если нет, то выложить вложением все скрипты которые имеют отношение к этому, стили (в каталогах которые они используют), и результирующий html-код индексной страницы. Иначе вам многое могут советовать, но не факт что это все в итоге будет работать. |
Давайте так. Вы же смотрели меню по ссылке, которую давал рони. Можно его не подключать, но вот как он работает, эту идею можно взять, ибо она логична в данном случае и визуально показывает "куда спряталось" )
Но есть в вашем меню одна несуразица. У вас кнопка управления меню и элементы меню находятся в одном родительском блоке, который как раз и надо будет убирать за пределы экрана при сворачивании панели. То есть эта кнопка как и логотип должны быть вне блока меню, их родителем должен быть блок div id="header". А вот меню, а возможно и любые иные элементы, которые могу быть добавлены в панель должны помещаться в общего родителя, например с id='swap". Более того, кнопка управления может быть не просто черточками, а иметь и стрелку указывающую направление свернуть/развернуть. Но что должно быть точно, это размер свернутой панели - ее будет задавать размер кнопки (логотипа) по ширине + отступы слева и справа, то есть чтобы при свернутой панели меню, логотип и кнопка были по центру. Я посмотрел по ссылке ваш проект, и если говорить откровенно, то многое чего в меню желательно бы изменить, так как поведение его элементы при их выборе либо не видны, либо ведут себя странно. Но вы измените структуру кода хотя бы того, что я написал выше - кнопка управления это одно, а все иное что надо скрывать, это в отдельном блоке. И тогда управление панелью будет очень простое. |
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"> можно управляя его внешним отступом слева. Подумайте, измените. А разобравшись с панелью, будете разбираться с остальным, чего у вас не так, а оно у вас есть, включая и ошибки. |
Значит так:
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,
ОГРОМНЕЙШЕЕ СПАСИБО!))) Все изменила и вроде работает)) Только вот контент не центрируется, а остается на месте в отличии от демо этого скрипта(( Это легко исправить? |
Контент - имеется ввиду сообщения?
Ну вообще-то данный код не затрагивает контент, то что сказал заменить, так это у вас монотонно прописывалось подключение плагина scroll (кстати у вас ошибки в скриптах где-то, и как раз связанные с прокруткой). То что изменили стили и заменили id=logo на class=logo, а это кроме самой панели где-то еще используется, то вполне возможно что в этом причина. Можно найти в редакторе такие места и изменить, но если это затруднительно, то верните назад, то есть опять укажите id=logo для блока (но не меняя его код), и в стилях тоже. Если проблема не исчезнет, то не могу сказать с чем она связана. Это надо разбираться, но с таким кодом как у вас, это .... |
Посмотрел на сервере после изменений - не понял, что именно не центрируется?
|
| Часовой пояс GMT +3, время: 17:24. |