01.04.2015, 13:03
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
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;
}
|
|
01.04.2015, 13:17
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Не делайте по примеру Infinity178, подключите уж лучше то, что по ссылке дал рони.
|
|
01.04.2015, 13:31
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
|
laimas,
Я просто не совсем поняла как подключить правильно этот скрипт, чтобы кнопка скрытия находилась слева, а не справа. И при скрытии там же оставалась, пример не совсем верный.(
|
|
01.04.2015, 13:37
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Ну так вы скачайте его, и там уж точно будет демо версии, возможно даже несколько, если этот плагин реализует различные версии меню (по стилю, положению и т.п.) В этих демо версиях все и будут прописано, как подключать, как вызывать.
Если же с этим трудности, и нужно более понятное и простое, то еще раз - представьте полностью структуру своего меню, стилей его описывающих, а также структуру и стили других элементов, которые так или иначе будут подвергаться этим изменениям. Иначе не избежать вопросов в последствии - "почему я, а оно...?"
|
|
01.04.2015, 13:43
|
|
Профессор
|
|
Регистрация: 13.04.2014
Сообщений: 187
|
|
Вот готовый, рабочий пример по проще..
<!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>
Последний раз редактировалось Infinity178, 01.04.2015 в 13:52.
|
|
01.04.2015, 13:50
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
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;
}
Последний раз редактировалось Snezhana, 01.04.2015 в 14:25.
|
|
01.04.2015, 13:51
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
Infinity178,
Хорошо, только дело в том, что меню изначально должно быть открытым, а потом при клике - закрываться, на такой пример я уже натыкалась. 
Последний раз редактировалось Snezhana, 01.04.2015 в 13:53.
|
|
01.04.2015, 13:54
|
|
Профессор
|
|
Регистрация: 13.04.2014
Сообщений: 187
|
|
Snezhana,
мама-мия!) попробуйте последний пример который выложел. См. как сделано..
+ Google Help
|
|
01.04.2015, 13:56
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Миледи, то что вы опять показали ну никак не вяжется со стилями указанными.  |
|
01.04.2015, 14:00
|
|
Профессор
|
|
Регистрация: 13.04.2014
Сообщений: 187
|
|
|
Snezhana, поменяйте стили
|
|
|
|
