01.04.2015, 14:03
|
|
Профессор
|
|
Регистрация: 13.04.2014
Сообщений: 187
|
|
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>
|
|
01.04.2015, 14:05
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
laimas,
Infinity178,
Вот, вроде все в порядке. 
Переделала правильно код.
Infinity178,
Тут еще дело в том, что кнопка выходит за границы Меню и полностью скрывает это самое меню, а у меня другая беда.((
Нужно чтобы кнопка была в меню и оставляла ту самую часть меню, вот как раз подобного я в гугле и не нашла
Последний раз редактировалось Snezhana, 01.04.2015 в 14:07.
|
|
01.04.2015, 14:10
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Infinity178, не надо писать лишнего, иначе дама окончательно запутается.
То что вы показали, не учитывает много, возможно даже того, чего нет, но может быть. И ваш код ну никак не отвечает этому.
|
|
01.04.2015, 14:15
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
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);
|
|
01.04.2015, 14:17
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
>Вот, вроде все в порядке.
Переделала правильно код.
Нет, не в порядке. Посмотрите на верстку - первый элемент меню (хотя это должна быть кнопка не меню) имеет своего родителя, а еще и общего с остальными пунктами. То есть все разрознено. Стили же описывают не div, а li элементы, и совсем другого родителя.
Мало того, а как вы будете поступать, если в этот блок навигации потребуется добавить еще блоки или элементы, но не входящие в меню? Будет писать под каждый свой скрипт управления?
|
|
01.04.2015, 14:18
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
|
laimas,
Еще skel.min.js и skel-layers.js
|
|
01.04.2015, 14:19
|
|
Интересующийся
|
|
Регистрация: 01.04.2015
Сообщений: 27
|
|
|
laimas,
Так, сейчас все пересмотрю и перепроверю
|
|
01.04.2015, 14:20
|
|
Профессор
|
|
Регистрация: 13.04.2014
Сообщений: 187
|
|
|
laimas, тут принцип работы бокового меню. Как раз без излишек.
Подогнать под свои нужды уже дело индивидуальное.
|
|
01.04.2015, 14:22
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Из этого кода к адаптивной верстке отношение имеет небольшая часть его. Управление же левой панелью никак не должно зависеть от кода выше, исключая только ширину этой панели, которая может изменяться в зависимости от разрешения экрана.
Все остальное я написал выше, в чем у вас несостыковки.
|
|
01.04.2015, 14:24
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
laimas, тут принцип работы бокового меню. Как раз без излишек.
Подогнать под свои нужды уже дело индивидуальное.
Как раз, если о излишках, то они у вас есть, все ваше можно и одной строкой заменить. Но дело не в этом, а в том, чем управлять.
|
|
|
|
