Я открываю левую панель "300 пикселей", но мне нужно открыть левую панель на 80% от ширины. не могли бы вы рассказать мне, как левая панель не в px в%.
Я хочу открыть панель шириной около 80%.
.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}
JSFiddle:
http://jsfiddle.net/eHded/1676/
CSS:
.panel {
width:80%;
left:-80%;
}
.slider-arrow {
left:-80%;
}
И JS:
$('.slider-arrow').click(function(){
var newWidth = $(this).parent().width() * 0.8;
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
left: "+=" + String(newWidth)
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
else {
$( ".slider-arrow, .panel" ).animate({
left: "-=" + String(newWidth)
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
}
});
Вы найдете ширину parent()
, получаете 80% от этого и используете это в своих анимациях вместо заданной величины px
.
пытаться
CSS
.panel {
width:80%;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-80%;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-80%;
}
JavaScript
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
left: "+=80%"
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
else {
$( ".slider-arrow, .panel" ).animate({
left: "-=80%"
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
}
});
});
80%
, просто? Также обратите внимание, что это не связано с jQM, так как вы не используете jQM.