Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder?

.btn-holder {
        background: rgba(255, 255, 255, 0.5);
        position: static;
        z-index: 10;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
      }
      .button {
        transform: translate(-50%, -50%);
        background-color: #a137a7;
        border: none;
        color: white;
        padding: 8px 13px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        position: absolute;
        cursor: pointer;
        right: -1%;
        bottom: -1%;
        font-family:'Source Sans Pro', sans-serif;
        opacity: .8; 
      }

      .button:hover {
        background-color: #732878;
        color: white;
      }
<div class="btn-holder">
        <div class="button"><a href="/"><img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a></div>
      </div>

      <!-- begin snippet: js hide: false console: true babel: false -->
css

Answer №1

Need a starting point for your menu design? Here's a quick example to steer you in the right direction! There are some potential improvements to consider, like delaying the display:none to allow clicking on menu links. If you need further assistance, just drop a comment and I'll be happy to help.

#btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: static;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#btn-holder > .button {
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  padding: 8px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  right: -1%;
  bottom: -1%;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .8;
  border-radius: 3px;
}

#btn-holder > .button:hover {
  background-color: #732878;
  color: white;
}

#btn-holder > .menu {
  opacity: 0;
  transition: opacity .5s;
  width: 100px;
  transform: translate(-50%, -50%);
  background-color: #333;
  border: none;
  color: white;
  padding: 8px;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  right: 100%;
  bottom: 25px;
  box-shadow:0 2px 7px rgba(0,0,0,.4);
}

.menu a {
  text-decoration: none;
  color: #eee;
  transition: color .3s;
}

.menu a:hover {
  color: #2196f3;
}

.menu > ul {
  list-style: none;
  margin: 2px;
  padding: 0 0 0 15px;
}

.menu > ul > li:first-child {
  margin-left: -15px;
}

.menu p {
  opacity: 1;
  margin: 0;
}

.menu p:after {
    content:"";
    display: block;
    height: 1px;
    vertical-align: bottom;
    width: 100%;
    border-top: 1px solid #eee;
    opacity: .4;
}

#btn-holder > .button:hover + .menu {
  opacity: 1;
  transistion-delay: 1s;
}

#btn-holder .menu:hover {
  opacity: 1;
}
<div id="btn-holder">
  <div class="button">
    <a href="/"><img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a>
  </div>
  <div class="menu">
    <p><a href="#">Home</a></p>
    <ul>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Post 1</a></li>
      <li><a href="#">Post 2</a></li>
    </ul>
    <p><a href="#">Products</a></p>
    <p><a href="#">About</a></p>
  </div>
</div>

For hands-on experimentation, check out the codepen link where you can make your own tweaks: http://codepen.io/XanderLuciano/pen/YGPoqE

To reveal the menu when hovering over the button using CSS, I utilized the + selector. When .button:hover is activated, the adjacent div class="menu" changes from display:none to block. Here's an excerpt of the code:

#btn-holder > .button:hover + .menu {
  display: block;
}

If you need clarification or have any questions, feel free to reach out! :)

Answer №2

#btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: static;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#btn-holder > .button {
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  padding: 8px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  right: -1%;
  bottom: -1%;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .8;
  border-radius: 3px;
}

#btn-holder > .button:hover {
  background-color: #732878;
  color: white;
}

#btn-holder > .menu {
  opacity: 0;
  transition: opacity .5s;
  width: 100px;
  transform: translate(-50%, -50%);
  background-color: #333;
  border: none;
  color: white;
  padding: 8px;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  right: 0%;
  bottom: 25px;
  box-shadow:0 2px 7px rgba(0,0,0,.4);
}

.menu a {
  text-decoration: none;
  color: #eee;
  transition: color .3s;
}

.menu a:hover {
  color: #2196f3;
}

.menu > ul {
  list-style: none;
  margin: 2px;
  padding: 0 0 0 15px;
}

.menu > ul > li:first-child {
  margin-left: -15px;
}

.menu p {
  opacity: 1;
  margin: 0;
}

.menu p:after {
    content:"";
    display: block;
    height: 1px;
    vertical-align: bottom;
    width: 100%;
    border-top: 1px solid #eee;
    opacity: .4;
}

#btn-holder > .button:hover + .menu {
  opacity: 1;
  transistion-delay: 1s;
}

#btn-holder .menu:hover {
  opacity: 1;
}
<div id="btn-holder">
  <div class="button">
    <a href="/"><img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a>
  </div>
  <div class="menu">
    <p><a href="#">Home</a></p>
    <ul>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Post 1</a></li>
      <li><a href="#">Post 2</a></li>
    </ul>
    <p><a href="#">Products</a></p>
    <p><a href="#">About</a></p>
  </div>
</div>

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

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascriptjqueryhtmlcssinput

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

javascripthtmlcss

Switch up the webpage's font using a dropdown selection box

I'm interested in adding a drop-down box to my webpage that allows users to change the font of the site when they click on it. I attempted the code below, but it didn't seem to work. Any suggestions? Regards, Sam CSS .font1 p { font-family: " ...

htmlcssangularjs

Clicking on text will open a popup div using HTML and CSS

I am looking to create a popup div instead of a popup window for my 'About' picture/page with the current button. Here is an example: ...

csshtmlpopup

Creating a circular shape that adjusts to different screen sizes using only CSS

Is there a way to create perfect circles using only CSS without them turning into ovals when using percentage values for height? ...

htmlcss

Animating a div using a changing scope variable in AngularJS

As a newcomer to Angular, I am looking to add animation to a div element using ng-click within an ng-repeat loop. Here is what I have attempted: app.js var app = angular.module( 'app', [] ); app.controller('appController', function($ ...

javascripthtmlcssangularjs

Shifting the form to the bottom right corner

Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...

csshtml

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

javascripthtmljquerycss

Attempting to create a div element that automatically adjusts itself horizontally in the center through the utilization of margins

I searched through examples on stack overflow that had similar problems to mine, but unfortunately, I couldn't find a solution. I'm not sure what I'm doing wrong, but the div is not aligning horizontally center as expected. It seems to work ...

htmlcss

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

I am seeking assistance in changing the style of a specific ListItem, similar to what is demonstrated in this Codesandbox. In the Codesandbox example, a global CSS stylesheet is utilized, but I prefer to implement the changes using the withStyle techniqu ...

cssreactjsmaterial-uijsshigher-order-components

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

javascriptjqueryhtmlcssajax

Replace the current CSS styles of a pre-installed package

I recently added a package for a type writer effect, but I'm having trouble with it not overriding the CSS styles I've set in the component. Here's an example of what I have: <template> <v-row class="hero" align-content= ...

javascriptcssvue.jssass

The padding on the button inside the v-card is not being applied as expected

I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

javascriptcssvue.jsvuetify.js

The arrangement of CSS code is crucial for it to work properly; any deviation from the correct order

I am facing a problem where I am trying to display a circular div using CSS, but it only works if the background image property is set first. Typically, this wouldn't be an issue if the image wasn't being dynamically inserted using PHP code. I ...

css

Add a touch of vibrancy to the button background by incorporating two

Looking to apply two different background colors to my button. Here is the design I'm aiming for: Is it feasible to achieve this design using only CSS, or do you have any other suggestions? Appreciate your input! ...

htmljquerycss

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

Implement transition effect on collapsible div with styled-components in React

I am attempting to develop a straightforward collapsible div using styled-components within a react project. While I have successfully managed to toggle the div's open and close state based on certain conditions, I am facing difficulties in implement ...

cssreactjsstyled-components

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

javascriptcssreactjsweb-applicationsmaterial-ui

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

htmlcssreactjstypescript