Sliding panel, perhaps?

I've been working on a small project and I've managed to create this panel, but I'm looking to change the position of the "tab" to something similar to this Can anyone help me out? I'm still new to all of this~

http://jsfiddle.net/2YhzT/ 

#purple {
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
text-align: center;
font-size: 11px;
position:fixed;
left:-50px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
x-index:999;
}


I think there might be an issue with this section;

htmlcssslideouttabslideout

Answer №1

Click here for a live demo

CSS Styling:

#purple {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    position:fixed;
    height:10px;
    left:-50px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    x-index:999;
}
#purple:hover {
    left:0px;
}
#purple:hover > div {
    display: inline-block;
}
#red {
    font-size: 11px;
    background: #FEFEFE;
    border:1px solid;
    border-left:none;
    padding:5px 0 5px 0;
    width:100px;
    height:10px;
    x-index: 50;
}
#redtab {
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius:0px;
    border:1px solid;
    border-left:none;
    text-align: center;
    height:10px;
    padding:5px 0 5px 0;
    width:25px;    
    font-size: 11px;
}


You can also view the demonstration based on your specific image requirements by following this link: Unique Demo Link

CSS Styling:

#purple {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    position:fixed;
    height:10px;
}
#purple:hover > div {
    display: inline-block;
}
#red {
    font-size: 11px;
    background: #FEFEFE;
    border:1px solid;
    border-left:none;
    padding:5px 0 5px 0;
    width:100px;
    height:10px;
    x-index: 50;
}
#redtab {
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius:0px;
    border:1px solid;
    border-left:none;
    text-align: center;
    height:10px;
    padding:5px 0 5px 0;
    width:25px;    
    font-size: 11px;
}

Answer №2

Link to Fix

Applying these styles to #redtab appears to resolve the issue:

position:relative;
top:-19px;
left:100px;

Alternatively, using display:inline-block is recommended. Include this in #redtab:

display: inline-block;
position:absolute;
top:0px;
left:100px;

Also, remember to add display:inline-block to #red as well.

The solution now adapts to window resizing too.

Another Example

If you wish to toggle visibility based on user interaction, follow these steps:

  1. Add display:none to #redtab (initially hidden)

  2. When hovering over the main navigation element, reveal it by:

    #purple:hover #redtab {
    display: inline-block;
}

Animate for a smoother transition without any glitches.

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

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Get the omisphere download I created this hyperlink because my previous attempts didn't work, but unfortunately, this one still isn't functioning properly. Is it possible that the issue is with my CSS? ...

htmlcss

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

Loading HTML dynamically

Currently, I am working with node.js, express, and handlebars. When passing JSON data via res.render() to handlebars (hbs), I use {{#each dataJson}} to loop through the data and display it. However, if my JSON file had a large number of entries, loading t ...

htmlnode.jsjsonexpresshandlebars.js

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

javascriptjqueryhtml

The chosen option does not equal the value retrieved by using jQuery's

I am perplexed by the situation at hand. It seems that there is a discrepancy in the selected option of my select element. Despite appearing as the empty default option on top, the inspected element reveals it displaying a value of 13. This issue arises f ...

javascriptjqueryhtmlvb.net

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. ...

htmlcss

Unclear when notifying div content

After creating a PHP page, I encountered an issue while trying to select the inner text of a div and alert it with jQuery. Instead of getting the expected result, it keeps alerting "undefined." What could possibly be causing this? Here is the code snippet ...

javascriptphpjqueryhtmlcss

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

htmlcsscss-floatwidth

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

I am looking to populate a table with data from an XML file as shown below: <table> <th>Head 1</th><th>Head 2</th><th>Head 3</th> <tr><td></td><td></td><td></td></tr> ...

htmljquerycssxml

uncertainty when implementing ng-if / ng-show / ng-hide

I am facing an issue with exporting content to PDF from my HTML. When a user clicks on the export button, the PDF is downloaded, but there are certain divs whose content I do not want to be exported or shown in the PDF. However, I still want them to be vis ...

javascripthtmlangularjsangularjs-ng-if

My approach to using this style in React involves utilizing the class attribute as follows: "class[attribute]" [Updated version 2]

When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example: <div class='something' data-test='4'></div> ... .something[data-test] { bac ...

cssreactjs

Optimizing CSS across various pages and screens sizes with critical importance

My CSS file is in need of optimization for quicker loading times. It contains numerous components utilized across various pages (such as the start page, category pages, and detail pages) on different screen sizes (mobile, tablet, desktop). Manual optimizat ...

cssperformanceweb

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

Jquery Flip! plugin causing problems with Ajax functionality

I'm currently experimenting with the FLIP! plugin and attempting to load its content using ajax. However, I've encountered a glitch along the way. It just doesn't seem to be functioning properly. While I can observe the post event taking pl ...

jqueryhtmlajaxpluginsflip

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

jquerycssjquery-animateheight

Adding a prefix to the imported CSS file

My React app, created with create-react-app, is designed to be integrated as a "widget" within other websites rather than functioning as a standalone application. To achieve this, I provide website owners with minified JS and CSS files that they can inser ...

javascripthtmlcssnode.jsreactjs

`vertical navigation on the left side with expanding submenus`

Trying to create a navigation system on the left side of the page with submenus appearing on the right without impacting the main content. If anyone has any code snippets or resources that can help achieve this, I would really appreciate it. The objectiv ...

htmljquerycss

Instead of accessing the HTML page directly, you can view the source page by using the F12

I need to extract both data and IPs from VirusTotal.com using selenium and Beautiful Soup in Python. When I make a get request, I only receive the view-source HTML instead of the complete data-rich HTML shown in Inspect mode (F12). Does anyone have any su ...

pythonhtmlseleniumbeautifulsoup

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

In a designated paragraph, set the display of all <span> elements to none using JavaScript

I have a long paragraph with over 10,000 lines of text and I need a way to quickly remove all the lines without hiding the entire paragraph. Specifically, I want to hide each line individually by changing the span style from "display:block" to "display:non ...

javascripthtml