HTML, JS, CSS
SliderBar
Minimal design
Egyedi CSS design
Forráskódok
Javascript
(function($) {
// ————– INIT PAGE —————-
var sb_slide_time = 500;
initSliderBar();
function initSliderBar() {
$(‘.sliderbar’).each(function(i) {
var childCount = $(this).children().length;
var childWidth = Math.round( ( (100 / childCount) + Number.EPSILON) * 1000) / 1000;
$(this).children().css( {„width”: childWidth + „%”} );
$(this).attr( „id”, „square4card_”+i);
$(this).children().each(function(j) {
$(this).attr( „id”, „sbcard_”+i+”_”+j);
});
});
$(‘.sliderbar > div’).css( „transition-duration”, sb_slide_time+”ms” );
$(‘.sliderbar > div’).append( ‘
‘ );
$(‘.sliderbar > div’).append( ‘
‘ );
$(„.sliderbar > div .closer”).hide();
$(‘.sliderbar > div .sb_body’).hide();
}
$(„.sliderbar > div .opener”).on( „click”, function () {
$(this).closest(‘.sliderbar’).find(‘.sb_body’).hide();
$(this).closest(‘.sliderbar’).find(‘.closer’).hide();
$(this).closest(‘.sliderbar’).find(‘.opener’).hide();
$(this).hide();
$(this).parent().find(„.closer”).show();
$(this).closest(‘.sliderbar’).children().css( {„width”: „10%”} );
$(this).parent().css( {„width”: „100%”} );
$(this).parent().find(„.sb_body”).show( sb_slide_time );
});
$(„.sliderbar > div .closer”).on( „click”, function () {
$sbcard = $(this).parent();
$sbcard.find(„.sb_body”).hide( sb_slide_time );
$sbcard.find(„.closer”).hide();
$(this).closest(‘.sliderbar’).find(‘.opener’).show();
$sbcard.closest(‘.sliderbar’).each(function(i) {
var childCount = $(this).children().length;
var childWidth = Math.round( ( (100 / childCount) + Number.EPSILON) * 1000) / 1000;
$(this).children().css( {„width”: childWidth + „%”} );
});
});
})(jQuery);
[/cc]
CSS
.sliderbar {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
.sliderbar { border: 1px solid #0c5460; }
.sliderbar > div {
display: inline-block;
position: relative;
align-self: stretch;
transition: width 1s ease-out;
}
.sliderbar > div {
border: 0px solid #0c5460;
border-width: 0px 1px 0px 0px;
}
.sliderbar > div:last-child {
border-width: 0px 0px 0px 0px;
}
.sliderbar .opener,
.sliderbar .closer {
position: absolute;
top: 0;
right: 0;
padding: 1rem 8px 0 0;
cursor: none;
}
.sliderbar .opener:hover,
.sliderbar .closer:hover {
cursor: pointer;
}
.sliderbar .opener { color: #4b89cc; }
.sliderbar .opener:hover { color: #113f76; }
.sliderbar .closer { color: #de4224; }
.sliderbar .closer:hover { color: #a01f06; }
.sliderbar > div .sb_title {
padding: 1rem 0.5rem;
background: rgba(143, 200, 247, 1);
background: linear-gradient(90deg, rgba(143, 200, 247, 1) 0%, rgba(143, 200, 247, 0) 100%);
font-size: 1.2rem;
color: #064486;
}
.sliderbar > div .sb_body {
padding: 1rem 0.75rem;
}
[/cc]
HTML
[/cc]
WP SHORTCODE
[ sx_sliderbar]
[ sx_sbcard title=”Bemutatkozás”]
Ez a bemutakozás oldala
[/sx_sbcard]
[ sx_sbcard title=”Eszközök”]
Ez az eszközök bemutatása oldal
[/sx_sbcard]
[ sx_sbcard title=”Kapcsolat”]
Ez a Kapcsolat oldal
[/sx_sbcard]
[/sx_sliderbar]
[/cc]