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

Guide on including a callback function in the renderCell columns of Material UI X Datagrid

When a button is clicked and the redux action is successful, I am trying to use a simple toast hook to display a message in the parent component where my Data grid is located. Can a callback be passed to utilize this hook from within the data grid? Here i ...

javascriptreactjsreact-hooksmaterial-ui

How to create a captivating image effect using CSS on hover

I am attempting to create an animated image on hover. The desired outcome is similar to the one showcased here: Check it out (scroll to view the image "Our Team") Essentially, I want a background where I can showcase information such as names and links ju ...

htmlcss

I am eager to design a form input field within the vuetify framework

I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, integrating it into Vuetify has ...

cssvue.jsnuxt.jsvuetify.js

Bizarre display of miscellaneous items on the monitor

Hey there, I've been working on creating a div to display information about both the Civilian and Vehicle that users input. Initially, everything worked perfectly with my HTML and CSS until I introduced two additional divs into the layout. With just o ...

htmlcss

Refreshing Table or div Content with Ajax in CodeIgniter

I am currently working on a project to display live chat conversations from clients. I am utilizing Openfire as the server and PHP Ajax for scripting. Openfire stores data in a MySQL table, which I access using Codeigniter-PHP: public function get_chats ...

phpjqueryajaxcodeigniterdatatable

Automating Image Downloads with Puppeteer by Adding Authentication Query String to Image URL

Attempting to save images stored in a web-space account can be challenging. Accessing the private space with credentials and retrieving the image link using Puppeteer works smoothly. However, when the src attribute of the image includes additional authenti ...

javascriptweb-scrapingrequestpuppeteerquery-string

"Transferring an array of data to a Laravel controller via AJAX: A step-by-step guide

Is there a way to send arrays of data to the back-end all at once? The Problem 1. This is what I'm currently sending: array:5 [ "_token" => "S5s5ZTTnnP93MyXgCql0l9vhHsiqt5VWaFyEedXj" "product_id" => "21" "specification_id" => "6" " ...

javascriptjqueryajaxlaravel

Verifying the functionality of a custom directive in Angular 2 (Ionic 2) through unit

In my ionic application, I developed a custom directive specifically for text masking, aimed at formatting phone numbers within input fields. The core functionality of this directive revolves around utilizing ngControl to facilitate the retrieval and assig ...

javascriptangularunit-testingionic2testbed

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Need help with adjusting two columns on a webpage? The right column is fixed at 300px width, while the left column should take up the remaining space. Using flex works well, but when adding a responsive ad to the left column, it extends beyond the availabl ...

cssbootstrap-4

Ways to verify the existence of browser sessions when dealing with multiple instances of a browser

In the after Each function, I need to check if browser sessions exist for each instance of the browser being used. If a browser is closed, special tear down logic specific to the app needs to be added by verifying the browser session. ...

javascriptangularjsnode.jsjasmineprotractor

What is the best way to align two items where one is centered and the other is positioned to the left?

In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it: [ @ Text aligned in center ] Here is what I have tried so far: .icon{ justify-self: ...

css

What is the correct way to invoke a function from a different file?

Having trouble calling a function from another file in my JS code. I am unable to call a function from another js file. I suspect there is an issue with linking the two files. Code snippet from my first JS file const { response } = require('expre ...

javascriptnode.jsmongodbcallbackexpress-generator

Learn how to securely download files from an Azure Storage Container using Reactjs

I'm currently working on applications using reactjs/typescript. My goal is to download files from azure storage v2, following a specific path. The path includes the container named 'enrichment' and several nested folders. My objective is to ...

javascriptreactjstypescriptazure-storage

Send an array to Spring's controller using AJAX

I am currently encountering an issue while attempting to send an array of objects to a Spring controller using jQuery AJAX. Below is the snippet of Javascript code being utilized: var data = new Array(); $.each(products, function (i) { ...

javajqueryajax

Searching for $or command in express.js

Is it possible to use $or in the app.get() function of an express.js application? For example, how would I write a find() query that includes $or like this: db.inventory.find( { $or: [ { quantity: { $lt: 20 } }, { price: 10 } ] } ) I'm curious about ...

javascriptnode.jsmongodbexpress

Create a new array of objects by extracting specific properties from an existing array of objects

Consider the input array below: const initialArray = [{name: 'john', age: 12, height: 178, likes: 'music'}, {name: 'mike', age: 22, height: 181, likes: 'sport'}, {name: &ap ...

javascriptarraysobjectecmascript-6

Issues encountered when passing JavaScript object to PHP

I'm attempting to transmit my JavaScript object to PHP using JSON.stringify() JavaScript: $('#save').on('click touch', function(){ obj = { "1" : { "1" : "hey", "2" : "hay" }, ...

javascriptphpjsonajaxobject

Is there a way to retrieve the value of bindings in the component controller using Angular 1.5 and Typescript?

In my quest to develop a versatile left-hand menu component that can dynamically display different menu structures based on input strings, I stumbled upon an interesting challenge. By binding a string to the <left-hand-menu-component> element like so ...

javascriptangularjstypescript

How to Properly Implement app.use() in Express for Middleware

What is the reason behind some middleware functions being passed in with invocation parentheses, while an anonymous function is passed in without being invoked? app.use(logger()); app.use(bodyParser()); If logger() is evaluated immediately and the return ...

javascriptexpress

Discover an Element within a JSON Array and Append a New Value to it

I've got an array of JSON data structured like this: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Eve' } ] My goal is to locate an object by its id and append a ...

javascriptjsonvue.js