Transform your traditional sidebar into a sleek icon sidebar with Semantic UI

I am working on customizing the semantic-ui sidebar. My goal is to have it minimize to a labeled icon when the toggle button is clicked. However, I am having trouble with the animation and getting the content to be pulled when I minimize it to the labeled icon sidebar.

HTML

<div class="ui left demo vertical inverted visible sidebar menu">
    <a class="item">
        <i class="home icon"></i>
        Home
    </a>
    <a class="item">
        <i class="block layout icon"></i>
        Topics
    </a>
    <a class="item">
        <i class="smile icon"></i>
        Friends
    </a>
</div>
<div class="pusher">
  <a href="#" id="toggle-btn">Toggle</a>
</div>

JS

$("#toggle-btn").click(function() {
  $(".ui.sidebar")
    .toggleClass("labeled icon");
});

Check out the codepen for reference:

http://codepen.io/andhikaribrahim/pen/rWNEzr

Any assistance would be greatly appreciated. Thank you in advance.

javascriptjqueryhtmlcsssemantic-ui

Answer №1

Don't miss out on checking this Codepen. Make sure to include a class in the .pusher and animate it with jQuery. Utilize CSS transitions for smooth animations.

Here's the code snippet for reference:

CSS:

.ui.left {
  transition: width .2s linear;
}

.labeled.icon {
  width: 84px !important;
}

.pusher.push {
  transform: translate3d(84px,0,0) !important;
}

JS:

$("#toggle-btn").click(function() {
  $(".ui.sidebar").toggleClass("labeled icon");
  $(this).parent().toggleClass('push');
});

Give it a try and see how it enhances your website!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to integrate a Sequalize API into my React project?

I am looking for guidance on how to retrieve records from my MYSQL database and integrate it into my API. I am unsure about the routing process (do I need to create a component?) and struggling to find resources on using sequelize with React. Any assista ...

javascriptmysqlreactjsexpresssequelize.js

The desired hover effect on the navigation bar is not functioning properly

I have successfully created a hover effect for my navigation bar and the list inside it. However, I am facing an issue where the box shadow effect is only appearing in a small area when hovered (see image below). My goal is to extend the shadow effect to ...

htmlcss

HTML form for selecting shipping method in PayPal

In my shopping cart setup, I offer two shipping methods: 'express' and 'standard'. I'm wondering if it's feasible to transmit this data to PayPal using HTML variables? ...

htmlformsvariablespaypal

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

After applying this CSS code to remove all styles: * { all: unset; display: revert; } The issue arises in Chrome browser where CSS Hyphens are not taking effect. This can be seen with the following example: div { font-size: 3rem; -webkit-hy ...

cssgoogle-chrome

Modifying webpack settings for a create-react-app based project: A step-by-step guide

After starting a new react project with create-react-app, I am looking to update the webpack configuration. However, I cannot seem to locate the webpack file. Should I be creating this file myself, or is there another process involved? As someone who is ...

javascriptreactjswebpackcreate-react-app

Stay up-to-date with the latest headlines on your Android device!

I am currently developing an Android application and I need to retrieve the most recent news from this specific page, specifically the tab labeled "NYHEDER": Once I have retrieved the news, I plan to display it on the app's screen. I have come acros ...

androidhtmljsoup

Creating custom designs for a HTML button using CSS

Within an HTML form, there are two buttons set up as follows: <button kmdPrimaryButton size="mini" (click)="clickSection('table')">Table View</button> <button kmdPrimaryButton size="mini" (click)=&quo ...

htmlcsstypescript

Learn how to dynamically activate an icon in Angular to enhance user interaction

HTML Code: The Zoom Component <div class="zoom py-3"> <i nz-icon nzType="minus" (click)="zoomToggle(false)" nzTheme="outline"></i><br> <i nz-icon nzType="plus" (click)=&q ...

javascriptangulartypescript

Tips for efficiently serving a static file without triggering a disk read

res.sendFile is the preferred method for serving a static file in express. However, it appears that res.sendFile reads the file from disk with each request, as shown below: router.get('/', (req, res) => { res.sendFile('./guest.js&apo ...

javascriptnode.jsexpress

Unable to fetch Title from Strapi

I have a collection type named posts with the following values: To access the API, I have a file in my lib folder that contains the following code: export async function getPosts() { var api_base_url = process.env.API_BASE_URL; const response = await fetc ...

javascriptnext.jsstrapi

Guide on inputting information into a dual-column table where one column is linked to the other

After successfully inserting data with hardcoded values to verify the relation between the 2 columns, I am now wondering if there is a way to reference the value of id in reply_id. This is how I manually inserted data: const { data, error } = await su ...

javascriptnext.jssupabase

Retrieving data from a backend express server using Client-side Javascript

I have created an Express Server set up in the following way: var mysql = require('mysql2'); var express = require('express'); var app = express(); var PORT = 3000; app.get('/getDataFromDatabase', function(req, res) { cons ...

javascriptnode.jsexpress

Using jQuery to select and check the appropriate checkbox within a table cell

I have encountered an issue that can be found here. The problem arises when I try to click on a TD element and toggle the checkbox inside it. This works fine for checkboxes directly inside TD elements, but when there is a table nested inside a TD, the so ...

jquerycheckbox

Sorting through a JavaScript array

I am facing a peculiar problem while trying to filter an array in TypeScript. Here is the structure of my object: Sigma.model.ts export class Sigma { sigmaId: number; name: string; userId: number; starId: string; } `` The starId property contains com ...

javascriptangulartypescript

Utilize MySQL and Ajax to dynamically populate multiple dropdown menus

I have two dropdown menus for selecting countries and operators. The operator dropdown menu will populate based on the selection made in the countries dropdown menu. However, it seems that when I choose more than one country from the countries dropdown, th ...

phpjqueryajax

Having trouble retrieving data sent via ajax in PHP

Currently, I am using Ajax to send a variable in my PHP file. Here's the code snippet: getVoteCount: function(){ App.contracts.Election.deployed().then(function(instance) { for(i=0; i<4; i++){ instance.candidates(i).then(functi ...

javascriptphpajaxcross-domain

Why is the jQuery not functioning within the AngularJS function?

I am encountering an issue with writing jQuery inside an AngularJS function. I can't seem to figure out why it's not working properly. HTML <div> <span ng-repeat="image in post.postImages" ng-if="$index <= 3" ng-init="image.showD ...

javascriptjqueryangularjs

Issue with automatic compiling in Sublime 2 for less2css

Whenever I try to save my style.less file, the automatic compilation doesn't happen. Is there a mistake in how I've set it up? Here's what is currently in my ox.sublime-project file: { "folders": [ { ...

csscompilationlesssublimetext2

I'm having trouble getting $.getJSON to function properly

Has anyone encountered issues with the getJSON function in jQuery? function loadJSON(){ console.log("loading JSON") var jsonFile = themeURL+"/map.json" $.getJSON(jsonFile, function(data){ console.log("loaded JSON") $("#infobox").fadeOut(1000 ...

javascriptjqueryjson

What steps can I take to hide my textarea after it has been clicked on?

Recently, I reached out for help on how to make my img clickable to display a textarea upon clicking. While I received the solution I needed, I now face a new challenge - figuring out how to make the textarea disappear when I click the img again. Each clic ...

javascripthtmlcssimagetextarea