Created
September 7, 2018 11:32
-
-
Save faidhim/ed4f16314a21e16c001556c33da8413e to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/tuvujim
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| font-family: "open sans", "roboto", "helvetica", san-serif; | |
| font-size: 12px; | |
| background-color: #000; | |
| } | |
| #toolbar-wrap { | |
| width: 600px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| #toolbar-wrap > div { | |
| min-height: 20px; | |
| min-width: 20px; | |
| } | |
| #toolbar { | |
| width: 80px; | |
| position: relative; | |
| height: 690px; | |
| } | |
| #toolbar img { | |
| width: 38px; | |
| } | |
| #toolbar .mover { | |
| position: absolute; | |
| right: 0; | |
| top: 3px; | |
| width: 3px; | |
| height: 31px; | |
| background-color: #F28973; | |
| transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); | |
| box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.3); | |
| } | |
| #toolbar ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 0 auto; | |
| padding: 7px 0 16px 4px; | |
| height: 100%; | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| #toolbar ul li { | |
| width: 34px; | |
| height: 24px; | |
| display: block; | |
| margin-left: -2px; | |
| color: transparent; | |
| box-sizing: border-box; | |
| border-radius: 2px; | |
| transition: all 0.2s ease; | |
| border: 1px solid transparent; | |
| position: relative; | |
| font-size: 0; | |
| } | |
| #toolbar ul li + li { | |
| margin-top: 3px; | |
| } | |
| #toolbar ul li:last-child { | |
| position: absolute; | |
| bottom: 4px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:nth-last-child(2) { | |
| position: absolute; | |
| bottom: 31px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:nth-last-child(3) { | |
| position: absolute; | |
| bottom: 60px; | |
| height: 54px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:hover { | |
| border: 1px solid #FFE07D; | |
| cursor: pointer; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| #toolbar ul li:hover:before { | |
| background-color: #FFE07D; | |
| width: 20px; | |
| } | |
| #toolbar ul li:hover:after { | |
| background-color: #FFE07D; | |
| box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| #toolbar ul li.active { | |
| border: 1px solid #F28973; | |
| cursor: pointer; | |
| } | |
| #toolbar ul li.active:before { | |
| background-color: #F28973; | |
| width: 20px; | |
| } | |
| #toolbar ul li.active:after { | |
| background-color: #F28973; | |
| } | |
| #toolbar ul li:before { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| height: 1px; | |
| background-color: #CCCCCC; | |
| margin-top: 11px; | |
| right: -21px; | |
| transition: width 0.3s ease-out; | |
| } | |
| #toolbar ul li:after { | |
| width: 10px; | |
| height: 10px; | |
| background-color: #CCCCCC; | |
| display: block; | |
| margin: 6px 0; | |
| padding: 0; | |
| border-radius: 50%; | |
| position: absolute; | |
| content: ""; | |
| left: 50px; | |
| transition: all 0.3s ease-in; | |
| } | |
| #tool-detail { | |
| width: 520px; | |
| background-color: #fff; | |
| } | |
| #tool-detail #detail-body { | |
| border-left: 1px solid #d4d4d4; | |
| height: 100%; | |
| background-color: #fff; | |
| } | |
| #tool-detail .detail-section { | |
| display: block; | |
| height: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| #tool-detail .detail-section.active { | |
| display: block; | |
| overflow: visible; | |
| opacity: 1; | |
| } | |
| #tool-detail .detail-section header { | |
| padding: 25px; | |
| background-color: #000; | |
| background-image: linear-gradient(-188deg, #EEF2F3 0%, #C4E0E5 83%); | |
| } | |
| #tool-detail .detail-section header h3 { | |
| font-size: 2.5em; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| font-weight: 400; | |
| letter-spacing: 0.1em; | |
| color: #454D56; | |
| } | |
| #tool-detail .detail-section header img { | |
| box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.15); | |
| } | |
| #tool-detail .detail-section content p { | |
| font-size: 1.6em; | |
| padding: 25px; | |
| color: #4a4a4a; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>This is JFK</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae vitae quidem perspiciatis, numquam quae aspernatur vero ipsa consectetur et in nesciunt, tenetur fugit sit optio consequuntur reiciendis blanditiis voluptas dolor.</p> | |
| <div id="toolbar-wrap"> | |
| <div id="toolbar"> | |
| <img src="https://s20.postimg.cc/bjl5sivx9/main_tool.png" alt="photoshop toolbar" width="38" height="690" /> | |
| <div class="mover"></div> | |
| <ul class="items"> | |
| <li>Move Tools</li> | |
| <li>Selection Tools</li> | |
| <li>Lasso Tools</li> | |
| <li>Quick Selection Tools</li> | |
| <li>Crop Tools</li> | |
| <li>Eyedropper Tool</li> | |
| <li>Healing Tools</li> | |
| <li>Brush Tools</li> | |
| <li>Stamp Tools</li> | |
| <li>History Brush and Art History Brush</li> | |
| <li>Eraser Tools</li> | |
| <li>Gradient Tool</li> | |
| <li>Blur, Smudge, and Sharpen Tools</li> | |
| <li>Burn, Dodge, and Sponge Tools</li> | |
| <li>Vector Tools</li> | |
| <li>Type Tools</li> | |
| <li>Direct Selection Tools</li> | |
| <li>Custom Vector Based Shapes</li> | |
| <li>Hand Tool</li> | |
| <li>Magnifying Glass</li> | |
| <li>Customize</li> | |
| <li>Foreground and Background Colors</li> | |
| <li>Quick Mask Tool</li> | |
| <li>Screen Mode</li> | |
| </ul> | |
| </div> | |
| <div id="tool-detail"> | |
| <div id="detail-body"> | |
| <!-- 01 MOVE TOOL --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/vky83l7h9/01_move_tool.png" alt="" /> | |
| <h3>Move Tools</h3> | |
| </header> | |
| <content> | |
| <p>These are the primary tools for moving selected areas.</p> | |
| </content> | |
| </div> | |
| <!-- 02 Selection Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/u76l8a87x/02_select_tool.png" alt="" /> | |
| <h3>Selection Tools</h3> | |
| </header> | |
| <content> | |
| <p>These tools allow you to create selections based on geometric shapes, such as, a square, circle, rectangle, etc.</p> | |
| </content> | |
| </div> | |
| <!-- 03 LASSO TOOLs --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/grjkitzq5/03_lasso_tool.png" alt="" /> | |
| <h3>Lasso Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nobis natus exercitationem autem quasi, maiores aliquid repellendus sapiente minus vero dolorum, expedita voluptate nesciunt aut unde harum, quae neque officiis?</p> | |
| </content> | |
| </div> | |
| <!-- 04 Quick Selection Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/tk7oirbbx/04_quick_select.png" alt="" /> | |
| <h3>Quick Selection Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sunt deleniti molestiae provident sed dicta laborum dolores tempora autem, animi illum ea, corrupti minima doloribus non, illo deserunt nobis? Quia.</p> | |
| </content> | |
| </div> | |
| <!-- 05 Crop Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Crop Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo porro quisquam fugit distinctio doloribus inventore excepturi iusto, rem at pariatur nihil nulla quia voluptas quasi magni, necessitatibus aliquid consequuntur sint.</p> | |
| </content> | |
| </div> | |
| <!-- 06 Eyedropper Tool --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Eyedropper Tool</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aliquid similique quos odit ad facilis magni quas provident at ducimus sapiente, dolore aspernatur autem consequatur. Nam ipsa veritatis tempore dolore?</p> | |
| </content> | |
| </div> | |
| <!-- 07 Healing Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Healing Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur est ipsam! Eveniet eos quae esse laboriosam! Fuga quod enim voluptatem vel cupiditate consectetur quos velit ipsa, laudantium quibusdam ut.</p> | |
| </content> | |
| </div> | |
| <!-- 08 Brush Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Brush Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro dolor voluptate, nemo asperiores voluptates, dicta quisquam explicabo rem atque, corrupti deserunt id tempora quaerat deleniti perspiciatis sint possimus neque. Pariatur!</p> | |
| </content> | |
| </div> | |
| <!-- 09 Stamp Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Stamp Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eius aliquam autem voluptas reprehenderit dignissimos dolorum, fugit ut facere, asperiores voluptate minima ducimus ullam ratione ab mollitia vitae! Vero, praesentium!</p> | |
| </content> | |
| </div> | |
| <!-- 10 History Brush and Art History Brush --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" /> | |
| <h3>History Brush and Art History Brush</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita eligendi aperiam quos, nemo vitae animi provident corrupti neque iure soluta itaque id maiores blanditiis aliquid dolor dolorum ab, at eum!</p> | |
| </content> | |
| </div> | |
| <!-- 11 Eraser Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Eraser Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nobis natus exercitationem autem quasi, maiores aliquid repellendus sapiente minus vero dolorum, expedita voluptate nesciunt aut unde harum, quae neque officiis?</p> | |
| </content> | |
| </div> | |
| <!-- 12 Gradient Tool --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Gradient Tool</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sunt deleniti molestiae provident sed dicta laborum dolores tempora autem, animi illum ea, corrupti minima doloribus non, illo deserunt nobis? Quia.</p> | |
| </content> | |
| </div> | |
| <!-- 13 Blur, Smudge, and Sharpen Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Blur, Smudge, and Sharpen Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo porro quisquam fugit distinctio doloribus inventore excepturi iusto, rem at pariatur nihil nulla quia voluptas quasi magni, necessitatibus aliquid consequuntur sint.</p> | |
| </content> | |
| </div> | |
| <!-- 14 Burn, Dodge, and Sponge Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Burn, Dodge, and Sponge Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aliquid similique quos odit ad facilis magni quas provident at ducimus sapiente, dolore aspernatur autem consequatur. Nam ipsa veritatis tempore dolore?</p> | |
| </content> | |
| </div> | |
| <!-- 15 Vector Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Vector Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur est ipsam! Eveniet eos quae esse laboriosam! Fuga quod enim voluptatem vel cupiditate consectetur quos velit ipsa, laudantium quibusdam ut.</p> | |
| </content> | |
| </div> | |
| <!-- 16 Type Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Type Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro dolor voluptate, nemo asperiores voluptates, dicta quisquam explicabo rem atque, corrupti deserunt id tempora quaerat deleniti perspiciatis sint possimus neque. Pariatur!</p> | |
| </content> | |
| </div> | |
| <!-- 17 Direct Selection Tools --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Direct Selection Tools</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eius aliquam autem voluptas reprehenderit dignissimos dolorum, fugit ut facere, asperiores voluptate minima ducimus ullam ratione ab mollitia vitae! Vero, praesentium!</p> | |
| </content> | |
| </div> | |
| <!-- 18 Custom Vector Based Shapes --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Custom Vector Based Shapes</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo porro quisquam fugit distinctio doloribus inventore excepturi iusto, rem at pariatur nihil nulla quia voluptas quasi magni, necessitatibus aliquid consequuntur sint.</p> | |
| </content> | |
| </div> | |
| <!-- 19 Hand Tool --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Hand Tool</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aliquid similique quos odit ad facilis magni quas provident at ducimus sapiente, dolore aspernatur autem consequatur. Nam ipsa veritatis tempore dolore?</p> | |
| </content> | |
| </div> | |
| <!-- 20 Magnifying Glass --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Magnifying Glass</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur est ipsam! Eveniet eos quae esse laboriosam! Fuga quod enim voluptatem vel cupiditate consectetur quos velit ipsa, laudantium quibusdam ut.</p> | |
| </content> | |
| </div> | |
| <!-- 21 Customize --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Customize</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro dolor voluptate, nemo asperiores voluptates, dicta quisquam explicabo rem atque, corrupti deserunt id tempora quaerat deleniti perspiciatis sint possimus neque. Pariatur!</p> | |
| </content> | |
| </div> | |
| <!-- 22 Foreground and Background Colors --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Foreground and Background Colors</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eius aliquam autem voluptas reprehenderit dignissimos dolorum, fugit ut facere, asperiores voluptate minima ducimus ullam ratione ab mollitia vitae! Vero, praesentium!</p> | |
| </content> | |
| </div> | |
| <!-- 22 Quick Mask Tool --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Quick Mask Tool</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eius aliquam autem voluptas reprehenderit dignissimos dolorum, fugit ut facere, asperiores voluptate minima ducimus ullam ratione ab mollitia vitae! Vero, praesentium!</p> | |
| </content> | |
| </div> | |
| <!-- 22 Screen Mode --> | |
| <div class="detail-section"> | |
| <header> | |
| <img src="https://s20.postimg.cc/54zghpcf1/05_crop_tool.png" alt="" /> | |
| <h3>Screen Mode</h3> | |
| </header> | |
| <content> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eius aliquam autem voluptas reprehenderit dignissimos dolorum, fugit ut facere, asperiores voluptate minima ducimus ullam ratione ab mollitia vitae! Vero, praesentium!</p> | |
| </content> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| var listPos = []; //the array stores each tool's vertical location | |
| var listSections = []; | |
| var active = 0; | |
| // move the hightlight bar accroding to the choosen tool | |
| function moveToolBar(el, index) { | |
| $('.mover').offset({ top: listPos[index] }); | |
| $('#toolbar ul.items li.active').removeClass('active'); | |
| $(el).addClass('active'); | |
| } | |
| // detect if the content is connected to the toolbar highlight | |
| function loadContent(el) { | |
| var existActiveSection = $('#tool-detail #detail-body').find('.active'); | |
| if (existActiveSection.length > 0) { | |
| $(existActiveSection).removeClass('active'); | |
| } | |
| $(el).addClass('active'); | |
| } | |
| $(document).ready(function () { | |
| //collect list position | |
| var elements = $('#toolbar .items li'); | |
| var contents = $('#tool-detail #detail-body .detail-section'); | |
| listSections = contents; | |
| if (elements.length == listSections.length) { | |
| // assign arrays | |
| for (var i = 0; i < elements.length; i++) { | |
| var propTop = $(elements[i]).offset().top - 3; | |
| console.log(propTop); | |
| listPos.push(propTop); | |
| } | |
| } | |
| else { | |
| console.log("there is an error on the array length, check html structure"); | |
| } | |
| active = 0; | |
| $(elements[active]).addClass('active'); | |
| loadContent($(listSections[active])); | |
| }); | |
| $('#toolbar ul.items li').each(function (index, el) { | |
| $(this).on('click', function () { | |
| moveToolBar(this, index); | |
| loadContent($(listSections[index])); | |
| active = index; | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body { | |
| font-family: "open sans", "roboto", "helvetica", san-serif; | |
| font-size: 12px; | |
| background-color: #000; | |
| } | |
| #toolbar-wrap { | |
| width: 600px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| #toolbar-wrap > div { | |
| min-height: 20px; | |
| min-width: 20px; | |
| } | |
| #toolbar { | |
| width: 80px; | |
| position: relative; | |
| height: 690px; | |
| } | |
| #toolbar img { | |
| width: 38px; | |
| } | |
| #toolbar .mover { | |
| position: absolute; | |
| right: 0; | |
| top: 3px; | |
| width: 3px; | |
| height: 31px; | |
| background-color: #F28973; | |
| transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); | |
| box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.3); | |
| } | |
| #toolbar ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 0 auto; | |
| padding: 7px 0 16px 4px; | |
| height: 100%; | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| #toolbar ul li { | |
| width: 34px; | |
| height: 24px; | |
| display: block; | |
| margin-left: -2px; | |
| color: transparent; | |
| box-sizing: border-box; | |
| border-radius: 2px; | |
| transition: all 0.2s ease; | |
| border: 1px solid transparent; | |
| position: relative; | |
| font-size: 0; | |
| } | |
| #toolbar ul li + li { | |
| margin-top: 3px; | |
| } | |
| #toolbar ul li:last-child { | |
| position: absolute; | |
| bottom: 4px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:nth-last-child(2) { | |
| position: absolute; | |
| bottom: 31px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:nth-last-child(3) { | |
| position: absolute; | |
| bottom: 60px; | |
| height: 54px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:hover { | |
| border: 1px solid #FFE07D; | |
| cursor: pointer; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| #toolbar ul li:hover:before { | |
| background-color: #FFE07D; | |
| width: 20px; | |
| } | |
| #toolbar ul li:hover:after { | |
| background-color: #FFE07D; | |
| box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| #toolbar ul li.active { | |
| border: 1px solid #F28973; | |
| cursor: pointer; | |
| } | |
| #toolbar ul li.active:before { | |
| background-color: #F28973; | |
| width: 20px; | |
| } | |
| #toolbar ul li.active:after { | |
| background-color: #F28973; | |
| } | |
| #toolbar ul li:before { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| height: 1px; | |
| background-color: #CCCCCC; | |
| margin-top: 11px; | |
| right: -21px; | |
| transition: width 0.3s ease-out; | |
| } | |
| #toolbar ul li:after { | |
| width: 10px; | |
| height: 10px; | |
| background-color: #CCCCCC; | |
| display: block; | |
| margin: 6px 0; | |
| padding: 0; | |
| border-radius: 50%; | |
| position: absolute; | |
| content: ""; | |
| left: 50px; | |
| transition: all 0.3s ease-in; | |
| } | |
| #tool-detail { | |
| width: 520px; | |
| background-color: #fff; | |
| } | |
| #tool-detail #detail-body { | |
| border-left: 1px solid #d4d4d4; | |
| height: 100%; | |
| background-color: #fff; | |
| } | |
| #tool-detail .detail-section { | |
| display: block; | |
| height: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| #tool-detail .detail-section.active { | |
| display: block; | |
| overflow: visible; | |
| opacity: 1; | |
| } | |
| #tool-detail .detail-section header { | |
| padding: 25px; | |
| background-color: #000; | |
| background-image: linear-gradient(-188deg, #EEF2F3 0%, #C4E0E5 83%); | |
| } | |
| #tool-detail .detail-section header h3 { | |
| font-size: 2.5em; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| font-weight: 400; | |
| letter-spacing: 0.1em; | |
| color: #454D56; | |
| } | |
| #tool-detail .detail-section header img { | |
| box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.15); | |
| } | |
| #tool-detail .detail-section content p { | |
| font-size: 1.6em; | |
| padding: 25px; | |
| color: #4a4a4a; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var listPos = []; //the array stores each tool's vertical location | |
| var listSections = []; | |
| var active = 0; | |
| // move the hightlight bar accroding to the choosen tool | |
| function moveToolBar(el, index) { | |
| $('.mover').offset({ top: listPos[index] }); | |
| $('#toolbar ul.items li.active').removeClass('active'); | |
| $(el).addClass('active'); | |
| } | |
| // detect if the content is connected to the toolbar highlight | |
| function loadContent(el) { | |
| var existActiveSection = $('#tool-detail #detail-body').find('.active'); | |
| if (existActiveSection.length > 0) { | |
| $(existActiveSection).removeClass('active'); | |
| } | |
| $(el).addClass('active'); | |
| } | |
| $(document).ready(function () { | |
| //collect list position | |
| var elements = $('#toolbar .items li'); | |
| var contents = $('#tool-detail #detail-body .detail-section'); | |
| listSections = contents; | |
| if (elements.length == listSections.length) { | |
| // assign arrays | |
| for (var i = 0; i < elements.length; i++) { | |
| var propTop = $(elements[i]).offset().top - 3; | |
| console.log(propTop); | |
| listPos.push(propTop); | |
| } | |
| } | |
| else { | |
| console.log("there is an error on the array length, check html structure"); | |
| } | |
| active = 0; | |
| $(elements[active]).addClass('active'); | |
| loadContent($(listSections[active])); | |
| }); | |
| $('#toolbar ul.items li').each(function (index, el) { | |
| $(this).on('click', function () { | |
| moveToolBar(this, index); | |
| loadContent($(listSections[index])); | |
| active = index; | |
| }); | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: "open sans", "roboto", "helvetica", san-serif; | |
| font-size: 12px; | |
| background-color: #000; | |
| } | |
| #toolbar-wrap { | |
| width: 600px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| #toolbar-wrap > div { | |
| min-height: 20px; | |
| min-width: 20px; | |
| } | |
| #toolbar { | |
| width: 80px; | |
| position: relative; | |
| height: 690px; | |
| } | |
| #toolbar img { | |
| width: 38px; | |
| } | |
| #toolbar .mover { | |
| position: absolute; | |
| right: 0; | |
| top: 3px; | |
| width: 3px; | |
| height: 31px; | |
| background-color: #F28973; | |
| transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); | |
| box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.3); | |
| } | |
| #toolbar ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 0 auto; | |
| padding: 7px 0 16px 4px; | |
| height: 100%; | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| #toolbar ul li { | |
| width: 34px; | |
| height: 24px; | |
| display: block; | |
| margin-left: -2px; | |
| color: transparent; | |
| box-sizing: border-box; | |
| border-radius: 2px; | |
| transition: all 0.2s ease; | |
| border: 1px solid transparent; | |
| position: relative; | |
| font-size: 0; | |
| } | |
| #toolbar ul li + li { | |
| margin-top: 3px; | |
| } | |
| #toolbar ul li:last-child { | |
| position: absolute; | |
| bottom: 4px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:nth-last-child(2) { | |
| position: absolute; | |
| bottom: 31px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:nth-last-child(3) { | |
| position: absolute; | |
| bottom: 60px; | |
| height: 54px; | |
| left: 4px; | |
| } | |
| #toolbar ul li:hover { | |
| border: 1px solid #FFE07D; | |
| cursor: pointer; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| #toolbar ul li:hover:before { | |
| background-color: #FFE07D; | |
| width: 20px; | |
| } | |
| #toolbar ul li:hover:after { | |
| background-color: #FFE07D; | |
| box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| #toolbar ul li.active { | |
| border: 1px solid #F28973; | |
| cursor: pointer; | |
| } | |
| #toolbar ul li.active:before { | |
| background-color: #F28973; | |
| width: 20px; | |
| } | |
| #toolbar ul li.active:after { | |
| background-color: #F28973; | |
| } | |
| #toolbar ul li:before { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| height: 1px; | |
| background-color: #CCCCCC; | |
| margin-top: 11px; | |
| right: -21px; | |
| transition: width 0.3s ease-out; | |
| } | |
| #toolbar ul li:after { | |
| width: 10px; | |
| height: 10px; | |
| background-color: #CCCCCC; | |
| display: block; | |
| margin: 6px 0; | |
| padding: 0; | |
| border-radius: 50%; | |
| position: absolute; | |
| content: ""; | |
| left: 50px; | |
| transition: all 0.3s ease-in; | |
| } | |
| #tool-detail { | |
| width: 520px; | |
| background-color: #fff; | |
| } | |
| #tool-detail #detail-body { | |
| border-left: 1px solid #d4d4d4; | |
| height: 100%; | |
| background-color: #fff; | |
| } | |
| #tool-detail .detail-section { | |
| display: block; | |
| height: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| #tool-detail .detail-section.active { | |
| display: block; | |
| overflow: visible; | |
| opacity: 1; | |
| } | |
| #tool-detail .detail-section header { | |
| padding: 25px; | |
| background-color: #000; | |
| background-image: linear-gradient(-188deg, #EEF2F3 0%, #C4E0E5 83%); | |
| } | |
| #tool-detail .detail-section header h3 { | |
| font-size: 2.5em; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| font-weight: 400; | |
| letter-spacing: 0.1em; | |
| color: #454D56; | |
| } | |
| #tool-detail .detail-section header img { | |
| box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.15); | |
| } | |
| #tool-detail .detail-section content p { | |
| font-size: 1.6em; | |
| padding: 25px; | |
| color: #4a4a4a; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var listPos = []; //the array stores each tool's vertical location | |
| var listSections = []; | |
| var active = 0; | |
| // move the hightlight bar accroding to the choosen tool | |
| function moveToolBar(el, index) { | |
| $('.mover').offset({ top: listPos[index] }); | |
| $('#toolbar ul.items li.active').removeClass('active'); | |
| $(el).addClass('active'); | |
| } | |
| // detect if the content is connected to the toolbar highlight | |
| function loadContent(el) { | |
| var existActiveSection = $('#tool-detail #detail-body').find('.active'); | |
| if (existActiveSection.length > 0) { | |
| $(existActiveSection).removeClass('active'); | |
| } | |
| $(el).addClass('active'); | |
| } | |
| $(document).ready(function () { | |
| //collect list position | |
| var elements = $('#toolbar .items li'); | |
| var contents = $('#tool-detail #detail-body .detail-section'); | |
| listSections = contents; | |
| if (elements.length == listSections.length) { | |
| // assign arrays | |
| for (var i = 0; i < elements.length; i++) { | |
| var propTop = $(elements[i]).offset().top - 3; | |
| console.log(propTop); | |
| listPos.push(propTop); | |
| } | |
| } | |
| else { | |
| console.log("there is an error on the array length, check html structure"); | |
| } | |
| active = 0; | |
| $(elements[active]).addClass('active'); | |
| loadContent($(listSections[active])); | |
| }); | |
| $('#toolbar ul.items li').each(function (index, el) { | |
| $(this).on('click', function () { | |
| moveToolBar(this, index); | |
| loadContent($(listSections[index])); | |
| active = index; | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment