映像制作・ホームページ制作のことならワルキューレ

デザインについて

画像が開閉するメニュー

料金表などをコンパクトに見せやすくするために詳細を開閉して見れるようにスクリプトを使ってデザインしたものです。

閉じてる時にマウスをロールオーバーさせると開くと表示されて、開いてる時にロールオーバーさせると閉じるで表示されるようになってます。

仕組みについて

開閉の仕組みは、jqueryで制御してます。


$(function() {
        var obj ='.price_open_01,.price_open_02';
		var sw = '.switch,.switch1,.switch2,.switch3,.switch4,.switch5';
		var accordion = $(obj);
 $(function() {
		
			accordion.each(function () {
            var noTargetAccordion = $(this).siblings(accordion);
				$('.contentWrap').hide();
				$(this).find(sw).click(function() {
					$(this).toggleClass("active");
					$(this).next('.contentWrap').slideToggle("fast");
            });
		
			$(this).find(".close").click( function() {
                var targetContentWrap = $(this).parent(".contentWrap");
                $(targetContentWrap).slideToggle("fast");
                $(targetContentWrap).prev(sw).toggleClass("active");
            });
		 });
});	

画像のチェンジはhide()とshow()で表示切替


$(function(){
        var closeimg = '#imgChange2'
		$(closeimg).hide();
		$("#imgChange1").click(function(){
			$("#imgChange1").hide();
			$("#imgChange2").show();
		})
		$("#imgChange2").click(function(){
			$("#imgChange2").hide();
			$("#imgChange1").show();
		})
});        

実装したデザイン

ある企業で作成したものです。

標準パック

スピードパック

初期費用に含まれるサービス

WEBのプロによるコンサルティング

スマホサイト作成

独自ドメイン

ノウハウ教材

初期費用に含まれるサービス

スマホサイト作成

独自ドメイン

ノウハウ教材

ニュースリリース

Valid XHTML 1.0 Transitional

サイトPR

Luxury Beauty N-space

お勧めの温泉紹介

くまモン

旅行に行くなら熊本にいこう!