+ボタンでかっこよく開くコンテンツの作り方を

Writer: admin Type: duanmo Date: 2019-03-06 00:00
+ボタンでかっこよく開くコンテンツの作り方を教えて下さい!!+ボタンを押すと、続きが見られるコンテンツの作り方を知りたいです。http://www.lillilly.jp/こちらのサイトの下部の方にある「Brandconcent」「Shoplist」「Company」のように、+を押すと、回転しながら中が開くようなコンテンツは、どの様にして作るのでしょうか?実装できるhtml、css、js or jqueryのコードを教えて下さい。また、画像が背景に使われていると思いますが、その配置の仕方も知りたいです。よろしくお願いいたします。共感した0###細かな説明は省きますが、例えばこんな感じでしょうか。(cssの最後らへん)cssのtransform:rotateで棒状のspan要素を回転させてます。(cssの1行目)背景画像はsectionに背景画像を設定するだけです。<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"></head><body> <section class="section"> <div class="ctr"> <h2 class="hl">Brandconcepta<span></span> </h2> <div class="ctr-inner">dummy dummy dummy dummy dummy dummy dummy dummy dummy dummy </div> </div> </section> <br> <section class="section"> <div class="ctr"> <h2 class="hl">Brandconcepta<span></span> </h2> <div class="ctr-inner">dummy dummy dummy dummy dummy dummy dummy dummy dummy dummy </div> </div> </section></body></html>CSS.section { padding: 40px 0; background: url(https://placehold.jp/1920x200.png) center top;}.ctr { width: 1000px; margin: 0 auto}.ctr-inner { display: none;}.hl { text-align: center; position: relative; height: 40px; line-height: 40px; margin-bottom: .5em;}.hl span { width: 40px; height: 40px; float: right; position: relative; -webkit-transition: .3s; transition: .3s;}.hl span::before,.hl span::after { content: ""; display: block; color: #fff; width: 100%; height: 3px; background: #fff; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-transition: .3s; transition: .3s;}.hl span::before { -webkit-transform: rotate(90deg); transform: rotate(90deg)}.hl span::after { -webkit-transform: rotate(180deg); transform: rotate(180deg)}.rotate::before,.rotate::after { -webkit-transform: rotate(0deg) !important; transform: rotate(0deg) !important;}JS$(function () {$('.hl').click(function(){if ($(this).find("span").hasClass('rotate')){$(this).find("span").removeClass('rotate');$(this).next(".ctr-inner").slideUp(300);}else{$(this).find("span").addClass('rotate');$(this).next(".ctr-inner").slideDown(300);}});});ナイス0
###hin********様さっそく、ご丁寧にありがとうございます!!嬉しいです。実装してみたところ、+のアイコンが表示されず(一瞬出たのに、消えてしまいました)でも、ちゃんと押すと本文が開いて見られるような仕様になりました。いろいろ、調整してみます。ありがとうございました。
###丁寧に1から教えていただき、ありがとうございました。非常に役立ち、感謝しております。###+から-へのハンバーガーボタンはまだ探していますが、3本線から×へのハンバーガーボタンはこちらになります。https://www.misallychan.com/entry/2016/07/27/185000↑jQuery(javascript)で回転させています。ナイス0

 

TAG