Semantic UI – Sidebar Menu – Chapter 2 Part 6 – The Engineering of Conscious Experience

Aditya Giri

Next Part – https://www.youtube.com/watch?v=omE_lDapB6c

OOPS! Didn’t see how much longer video I was making. .

<iframe></p> <p><a href="https://www.youtube.com/watch?v=OR7VcD-xmLc">Source</a></p> <div class="be1e40beae42d993bafb8643f4ddde8b" data-index="3" style="float: none; margin:10px 0 10px 0; text-align:center;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-9244112244416304" data-ad-slot="4549240677"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;"></div> </div> </article> <div class="clearfix"></div> <ul class="default-theme-post-navigation"> <li class="theme-nav-previous"><a href="https://theengineeringofconsciousexperience.com/saara-aalto-let-it-go-frozen-multi-language-15-languages/" rel="prev"><span class="meta-nav">←</span> Saara Aalto – Let It Go (Frozen) Multi-Language, 15 languages</a></li> <li class="theme-nav-next"><a href="https://theengineeringofconsciousexperience.com/artificial-intelligence-tutorial-7-the-constraint-satisfaction-problem/" rel="next">Artificial Intelligence Tutorial #7: The Constraint Satisfaction Problem <span class="meta-nav">→</span></a></li> </ul> <div class="clearfix"></div> <h3 class='comment-reply-title'>Similar Posts</h3> <div class="mb-related-posts mb-simple-featured-posts mb-simple-featured-posts-wrap row"> <article class="mb-featured-article col-md-4 px-lg-3 post"> <a class="post-thumbnail" href="https://theengineeringofconsciousexperience.com/semantic-and-pragmatic-lecture-1/" aria-hidden="true" tabindex="-1"> <img width="501" height="282" src="https://theengineeringofconsciousexperience.com/wp-content/uploads/2019/05/1559311182_maxresdefault.jpg" class="attachment-magazinebook-featured-image-medium size-magazinebook-featured-image-medium wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://theengineeringofconsciousexperience.com/wp-content/uploads/2019/05/1559311182_maxresdefault.jpg 1280w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2019/05/1559311182_maxresdefault-300x169.jpg 300w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2019/05/1559311182_maxresdefault-768x432.jpg 768w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2019/05/1559311182_maxresdefault-1024x576.jpg 1024w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2019/05/1559311182_maxresdefault-520x293.jpg 520w" sizes="(max-width: 501px) 100vw, 501px" /> </a> <span class="cat-links"><a href="https://theengineeringofconsciousexperience.com/category/language/" rel="category tag">Language</a></span> <header class="entry-header"> <h3 class="entry-title"><a href="https://theengineeringofconsciousexperience.com/semantic-and-pragmatic-lecture-1/" rel="bookmark">semantic and pragmatic lecture 1</a></h3> <div class="entry-meta"> <span class="posted-on"><i class="far fa-calendar-alt"></i><a href="https://theengineeringofconsciousexperience.com/semantic-and-pragmatic-lecture-1/" rel="bookmark"><time class="entry-date published updated" datetime="2019-05-31T20:59:45-07:00">May 31, 2019</time></a></span><span class="byline"><i class="far fa-user-circle"></i><span class="author vcard"><a class="url fn n" href="https://theengineeringofconsciousexperience.com/author/e9ae6f73e81b2c90f847012cbde2bafa/">English 4U</a></span></span> </div> </header> </article> <article class="mb-featured-article col-md-4 px-lg-3 post"> <a class="post-thumbnail" href="https://theengineeringofconsciousexperience.com/13th-iass-ais-world-congress-of-semiotics/" aria-hidden="true" tabindex="-1"> <img width="501" height="282" src="https://theengineeringofconsciousexperience.com/wp-content/uploads/2020/09/1601485422_maxresdefault.jpg" class="attachment-magazinebook-featured-image-medium size-magazinebook-featured-image-medium wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://theengineeringofconsciousexperience.com/wp-content/uploads/2020/09/1601485422_maxresdefault.jpg 1280w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2020/09/1601485422_maxresdefault-300x169.jpg 300w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2020/09/1601485422_maxresdefault-1024x576.jpg 1024w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2020/09/1601485422_maxresdefault-768x432.jpg 768w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2020/09/1601485422_maxresdefault-520x293.jpg 520w" sizes="(max-width: 501px) 100vw, 501px" /> </a> <span class="cat-links"><a href="https://theengineeringofconsciousexperience.com/category/language/" rel="category tag">Language</a></span> <header class="entry-header"> <h3 class="entry-title"><a href="https://theengineeringofconsciousexperience.com/13th-iass-ais-world-congress-of-semiotics/" rel="bookmark">13th IASS-AIS World Congress of Semiotics</a></h3> <div class="entry-meta"> <span class="posted-on"><i class="far fa-calendar-alt"></i><a href="https://theengineeringofconsciousexperience.com/13th-iass-ais-world-congress-of-semiotics/" rel="bookmark"><time class="entry-date published updated" datetime="2017-06-27T06:49:44-07:00">June 27, 2017</time></a></span><span class="byline"><i class="far fa-user-circle"></i><span class="author vcard"><a class="url fn n" href="https://theengineeringofconsciousexperience.com/author/651e221b97cb03456f86aab858ac5941/">KTU E.mokymosi technologijų centras / KTU E-learning Technology Centre</a></span></span> </div> </header> </article> <article class="mb-featured-article col-md-4 px-lg-3 post"> <a class="post-thumbnail" href="https://theengineeringofconsciousexperience.com/chapter-2-applied-linguistics-of-language-teaching/" aria-hidden="true" tabindex="-1"> <img width="501" height="282" src="https://theengineeringofconsciousexperience.com/wp-content/uploads/2021/06/1622929262_maxresdefault.jpg" class="attachment-magazinebook-featured-image-medium size-magazinebook-featured-image-medium wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://theengineeringofconsciousexperience.com/wp-content/uploads/2021/06/1622929262_maxresdefault.jpg 1280w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2021/06/1622929262_maxresdefault-300x169.jpg 300w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2021/06/1622929262_maxresdefault-1024x576.jpg 1024w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2021/06/1622929262_maxresdefault-768x432.jpg 768w, https://theengineeringofconsciousexperience.com/wp-content/uploads/2021/06/1622929262_maxresdefault-520x293.jpg 520w" sizes="(max-width: 501px) 100vw, 501px" /> </a> <span class="cat-links"><a href="https://theengineeringofconsciousexperience.com/category/language/" rel="category tag">Language</a></span> <header class="entry-header"> <h3 class="entry-title"><a href="https://theengineeringofconsciousexperience.com/chapter-2-applied-linguistics-of-language-teaching/" rel="bookmark">Chapter 2: Applied linguistics of language teaching</a></h3> <div class="entry-meta"> <span class="posted-on"><i class="far fa-calendar-alt"></i><a href="https://theengineeringofconsciousexperience.com/chapter-2-applied-linguistics-of-language-teaching/" rel="bookmark"><time class="entry-date published updated" datetime="2020-12-30T10:54:50-07:00">December 30, 2020</time></a></span><span class="byline"><i class="far fa-user-circle"></i><span class="author vcard"><a class="url fn n" href="https://theengineeringofconsciousexperience.com/author/hassan_ait_bouzid/">Hassan Ait Bouzid</a></span></span> </div> </header> </article> </div> <div id="comments" class="comments-area"> <h5 class="comments-title"> 10 thoughts on “<span>Semantic UI – Sidebar Menu – Chapter 2 Part 6</span>” </h5> <ol class="comment-list"> <li id="comment-202777" class="comment even thread-even depth-1"> <article id="div-comment-202777" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCPXH1oYPVuSJxpkdXOT3gcw" class="url" rel="ugc external nofollow">pablo lamont</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202777"><time datetime="2016-09-05T21:33:31-07:00">September 5, 2016 at 9:33 pm</time></a> </div> </footer> <div class="comment-content"> <p>great job bro thx</p> </div> </article> </li> <li id="comment-202776" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-202776" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCPXH1oYPVuSJxpkdXOT3gcw" class="url" rel="ugc external nofollow">pablo lamont</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202776"><time datetime="2016-09-08T02:23:39-07:00">September 8, 2016 at 2:23 am</time></a> </div> </footer> <div class="comment-content"> <p>hi . do you have any further info about the semantic sidebar ? i need something that can help me build a site like <a href="http://codementor.io">codementor.io</a> well just sidebar more or less.. but right now i'm some kind of stuck in the dev. thx in advance.. any help will be very much appreciated.</p> </div> </article> </li> <li id="comment-202775" class="comment even thread-even depth-1"> <article id="div-comment-202775" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UC5XjevZvwWgG3ZtLO_vYx-w" class="url" rel="ugc external nofollow">Amar Rathod</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202775"><time datetime="2016-10-17T04:51:31-07:00">October 17, 2016 at 4:51 am</time></a> </div> </footer> <div class="comment-content"> <p>Hi, Thanks for your fantastic video. I have a question, How do you do slide in on top like given in this link (<a href="http://tympanus.net/Development/SidebarTransitions/#">http://tympanus.net/Development/SidebarTransitions/#</a>), in semantic ui ?</p> </div> </article> </li> <li id="comment-202774" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-202774" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCNJY-LFp3Weuzjcua7-OmSQ" class="url" rel="ugc external nofollow">jan karibjanov</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202774"><time datetime="2016-11-24T16:38:15-07:00">November 24, 2016 at 4:38 pm</time></a> </div> </footer> <div class="comment-content"> <p>18 minutes of fame</p> </div> </article> </li> <li id="comment-202773" class="comment even thread-even depth-1"> <article id="div-comment-202773" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCdx42x5fRFur3TWGiFVm9sA" class="url" rel="ugc external nofollow">Eternal Mist</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202773"><time datetime="2017-01-17T17:10:34-07:00">January 17, 2017 at 5:10 pm</time></a> </div> </footer> <div class="comment-content"> <p>Thanks for the tutorial! I found this solution that could be helpful to others. <a href="https://codepen.io/redshift7/pen/VaKmjq?editors=1000">https://codepen.io/redshift7/pen/VaKmjq?editors=1000</a></p> <p><b>***</b> not my own work</p> </div> </article> </li> <li id="comment-202772" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-202772" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCK92H8vxViGET_sZy7xRaUA" class="url" rel="ugc external nofollow">achievementSTriker</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202772"><time datetime="2017-01-29T16:50:02-07:00">January 29, 2017 at 4:50 pm</time></a> </div> </footer> <div class="comment-content"> <p>You need to put the code for the navbar menu inside the .pusher>.ui.container div, like so:</p> <p> <div class="pusher"><br /> <div class="ui container"><br /> <div class="ui basic icon menu"><br /> <div href="#" id="toggle" class="item"><br /> <i class="sidebar icon"></i><br /> Menu<br /> </div><br /> </div><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas adipisci et excepturi, cupiditate enim similique, <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas adipisci et excepturi, cupiditate enim similique, <br /> quod possimus ut consequuntur vel, ab voluptatibus eveniet recusandae quae dolorem fugiat sed quis corrupti.<br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas adipisci et excepturi, cupiditate enim similique, <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas adipisci et excepturi, cupiditate enim similique, <br /> </div> <br /> </div></p> </div> </article> </li> <li id="comment-202771" class="comment even thread-even depth-1"> <article id="div-comment-202771" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UC2cE7iEKYPJoHYLHnrvB6wg" class="url" rel="ugc external nofollow">Rishabh Arora</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202771"><time datetime="2017-08-01T06:00:18-07:00">August 1, 2017 at 6:00 am</time></a> </div> </footer> <div class="comment-content"> <p>how can we open the submenu items in the push menu again??</p> </div> </article> </li> <li id="comment-202770" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-202770" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCBe0ptsNilqQ55H6TNC2L4A" class="url" rel="ugc external nofollow">Chethan BV</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202770"><time datetime="2017-12-18T06:50:04-07:00">December 18, 2017 at 6:50 am</time></a> </div> </footer> <div class="comment-content"> <p>how to invoke a button inside sidebar that is when i clicked on button inside sidebar something should show</p> </div> </article> </li> <li id="comment-202769" class="comment even thread-even depth-1"> <article id="div-comment-202769" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCXCe1C47mfYp0KkIHttDZ7Q" class="url" rel="ugc external nofollow">Brigitta Hawes</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202769"><time datetime="2018-05-11T15:59:24-07:00">May 11, 2018 at 3:59 pm</time></a> </div> </footer> <div class="comment-content"> <p>Hi Aditya. Thank you for the great videos.</p> </div> </article> </li> <li id="comment-202768" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-202768" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="https://www.youtube.com/channel/UCuw1H7Noemudu_mpPmhimTQ" class="url" rel="ugc external nofollow">M. S.</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://theengineeringofconsciousexperience.com/semantic-ui-sidebar-menu-chapter-2-part-6/#comment-202768"><time datetime="2018-05-26T14:23:07-07:00">May 26, 2018 at 2:23 pm</time></a> </div> </footer> <div class="comment-content"> <p>"Wednesday"</p> </div> </article> </li> </ol> <p class="no-comments">Comments are closed.</p> </div> </main> </div> <div class="col-md-3 px-lg-3 "> </div> </div> </div> </div> <footer id="colophon" class="site-footer"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div class="site-info"> <span> Powered By: <a href="https://wordpress.org/" target="_blank">WordPress</a> </span> <span class="sep"> | </span> <span> Theme: <a href="https://odiethemes.com/themes/magazinebook/" target="_blank">MagazineBook</a> By OdieThemes </span> </div> </div> </div> </div> </footer> </div> <script>(function(){var advanced_ads_ga_UID="UA-88163215-1",advanced_ads_ga_anonymIP=!!1;window.advanced_ads_check_adblocker=function(t){var n=[],e=null;function a(t){var n=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return setTimeout(t,16)};n.call(window,t)}return a((function(){var t=document.createElement("div");t.innerHTML=" ",t.setAttribute("class","ad_unit ad-unit text-ad text_ad pub_300x250"),t.setAttribute("style","width: 1px !important; height: 1px !important; position: absolute !important; left: 0px !important; top: 0px !important; overflow: hidden !important;"),document.body.appendChild(t),a((function(){var a,o,i=null===(a=(o=window).getComputedStyle)||void 0===a?void 0:a.call(o,t),d=null==i?void 0:i.getPropertyValue("-moz-binding");e=i&&"none"===i.getPropertyValue("display")||"string"==typeof d&&-1!==d.indexOf("about:");for(var c=0,r=n.length;c<r;c++)n[c](e);n=[]}))})),function(t){"undefined"==typeof advanced_ads_adblocker_test&&(e=!0),null!==e?t(e):n.push(t)}}(),(()=>{function t(t){this.UID=t,this.analyticsObject="function"==typeof gtag;var n=this;return this.count=function(){gtag("event","AdBlock",{event_category:"Advanced Ads",event_label:"Yes",non_interaction:!0,send_to:n.UID})},function(){if(!n.analyticsObject){var e=document.createElement("script");e.src="https://www.googletagmanager.com/gtag/js?id="+t,e.async=!0,document.body.appendChild(e),window.dataLayer=window.dataLayer||[],window.gtag=function(){dataLayer.push(arguments)},n.analyticsObject=!0,gtag("js",new Date)}var a={send_page_view:!1,transport_type:"beacon"};window.advanced_ads_ga_anonymIP&&(a.anonymize_ip=!0),gtag("config",t,a)}(),this}advanced_ads_check_adblocker((function(n){n&&new t(advanced_ads_ga_UID).count()}))})();})();</script><div style="clear:both;width:100%;text-align:center; font-size:11px; "><a target="_blank" title="WP2Social Auto Publish" href="https://xyzscripts.com/wordpress-plugins/facebook-auto-publish/compare" >WP2Social Auto Publish</a> Powered By : <a target="_blank" title="PHP Scripts & Programs" href="http://www.xyzscripts.com" >XYZScripts.com</a></div><script type="text/javascript" src="https://theengineeringofconsciousexperience.com/wp-content/themes/magazinebook/js/navigation.js?ver=1.0.9" id="magazinebook-navigation-js"></script> <script type="text/javascript" src="https://theengineeringofconsciousexperience.com/wp-content/themes/magazinebook/js/skip-link-focus-fix.js?ver=1.0.9" id="magazinebook-skip-link-focus-fix-js"></script> <script type="text/javascript" src="https://theengineeringofconsciousexperience.com/wp-content/themes/magazinebook/js/jquery.easy-ticker.js?ver=3.1.0" id="magazinebook-news-ticker-js"></script> <script type="text/javascript" src="https://theengineeringofconsciousexperience.com/wp-content/themes/magazinebook/js/splide.min.js?ver=2.3.1" id="splide-js-js"></script> <script type="text/javascript" src="https://theengineeringofconsciousexperience.com/wp-content/themes/magazinebook/js/theme.js?ver=1.0.9" id="magazinebook-theme-js-js"></script> <script>!function(){window.advanced_ads_ready_queue=window.advanced_ads_ready_queue||[],advanced_ads_ready_queue.push=window.advanced_ads_ready;for(var d=0,a=advanced_ads_ready_queue.length;d<a;d++)advanced_ads_ready(advanced_ads_ready_queue[d])}();</script> </body> </html>