Designing this unique shape using CSS3 to create a sleek drop-down container

My goal is to design something that resembles the following:

The challenge lies in my preference to contain it within a single div, considering the drop-down features an inner shadow and a drop shadow.

Thank you in advance, and please feel free to ask for more details if needed.

This is my current progress:

CSS

.rectangle {
    background: #1f8dda;
    background-image: -moz-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -webkit-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -o-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: linear-gradient(180deg, #1f8dda 0%, #114dbc 100%);
    -moz-box-shadow: 0px 0px 2px 0px #000000;
    -webkit-box-shadow: 0px 0px 2px 0px #000000;
    -o-box-shadow: 0px 0px 2px 0px #000000;
    box-shadow: 0px 0px 2px 0px #000000;
    border-radius: 0px;
    margin: 0px;
    width: 145px;
    height: 138px;
}

I have also created a fiddle demonstrating this: http://jsfiddle.net/yHy5n/

javascripthtmlcss

Answer №1

While your menu structure may seem unconventional, I have created a simple outline to get you started: Check out the Demo
Please note that this is just a starting point for you to build upon.

With the HTML markup provided below, the main idea is to style the list elements of the main menu (h2) and the submenus separately to achieve a smooth gradient transition.

<ul class="nav">
    <li>HOME</li>
    <li class="active"><h2>DUNGEONS PIECES</h2>
    <ul class="subnav">
        <li>Floor<span class="count">123</span></li>
        <li>Walls<span class="count">54</span></li>
        <li>Sets<span class="count">7</span></li>
    </ul>
    </li>
</ul>

CSS:

.active {
    background: #1f8dda;
    /* ... */
}
.active h2 {
    background-image: linear-gradient(180deg, #1f8dda 34%, #228fdd 100%);
    /* ...                                                    /\ */
}            /*            gradient transition   --------------- */
.active ul { /*                                  \/              */
    background-image: linear-gradient(180deg, #228fdd 34%, #114dbc 100%);
    /* ... */
}

You may find that much of your compatibility CSS is no longer necessary - here are some resources to help:

Gradients
Box-shadow

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

Having trouble detecting the Selection event of a Dropdown List upon loading

When a user chooses an option from the dropdown menu, I need to capture the selected item and perform an action: $("#user-list").on("change", function() { var selectedUser = $(this).find(":selected").text(); // Perform action with the selected us ...

javascriptrazorjquery

Troubleshooting issue: PHP INSERT Prepared statement not working when using AJAX

Currently, I am trying to construct an INSERT statement using AJAX along with a prepared statement in PDO. This is my first attempt at combining AJAX and PDO, so there might be mistakes due to lack of experience. In its current state, I keep encountering ...

javascriptphpjqueryajaxpdo

How can I show a dynamic popover with specific content when a "Copy" action is triggered?

I am attempting to copy a value to the clipboard: /** * If the browser does not support direct clipboard manipulation, use an alternate method * This is used in the copyTextToClipboard function. * * Function found at: https://stackoverflow.com/a/3 ...

javascripthtmlbootstrap-5bootstrap-popover

The overflow hidden function does not seem to be fully functional on the iPad

Struggling to prevent body scrolling when a modal pop-up appears? I've tried setting the body overflow to hidden when opening the modal and resetting it when closing, which worked fine on desktop browsers. However, mobile devices like iPod/iPhone pose ...

javascriptjqueryhtmlcssipad

Mastering the art of incorporating background image transitions and creating a seamless slider for navigation

Is there a way to create a navigation menu like the one on this theme? On this theme, when you hover over a menu item, the background image smoothly moves left or right to the item you are hovering on. If anyone knows of plugins that can achieve this eff ...

javascriptjquerycss

Creating content by extracting key value pairs from a JSON object retrieved from Firebase

After setting up a Firebase database and populating it with JSON data, I found code from the Firebase documentation that allows me to update the data in real time. While this works well for my needs, I also want to access the values in the JSON to create l ...

javascriptjsonfirebasefirebase-realtime-database

What is the best way to showcase database values in a text-box using retrieval methods?

I am currently working on a database project that involves a webpage with 5 textboxes. One of these textboxes needs to display values from the database when it is in focus. I have the JavaScript and AJAX code to retrieve the data, but I am facing difficult ...

javascriptmysqlajaxjspnetbeans

What is the optimal backup plan for selecting rem as the font-size unit in a dynamic layout?

Recently, I started pondering the best fallback option to use when employing rem as the font-size unit. While pixels seem like a suitable choice, it becomes cumbersome to adjust every px-based font-size if you decide to modify the global font-size within a ...

cssfontsresponsive-design

Tips for implementing `overflow-x: hidden` on a `ValueContainer` when using `isMulti` in react-select V2

I'm currently grappling with finding a solution to have a react-select V2 component, configured as isMulti, hide selected values that exceed the width of the ValueContainer rather than breaking to a new line and expanding the component's height. ...

cssreactjsreact-select

What is the best way to connect an HTML file to a controller in Angular.js?

When developing an app module using the MEAN stack with MVC, I created a folder named AppModules. Inside AppModules, there is a folder called search, which contains three subfolders: models, views, and controllers. I've written an HTML file in the vie ...

javascripthtmlangularjsmodel-view-controllermean-stack

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

javascripthtmlcsschart.js

I am wondering if it is feasible for a POST route to invoke another POST route and retrieve the response ('res') from the second POST in Express using Node.js

Currently, I have a POST route that triggers a function: router.route('/generateSeed').post(function(req,res){ generate_seed(res) }); UPDATE: Here is the genrate_seed() function function generate_seed(res) { var new_seed = lightwallet. ...

javascriptnode.jsexpresspostaxios

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

The hover effect is being applied exclusively to the final React component

When using next.js and tailwindCSS for styling, I created a custom component that includes tags. The issue arises when multiple instances of this component are placed on the page, as only the last one is getting the desired hover effect. "index.js" import ...

cssreactjsnext.jshover

What is the best way to transform the HTML retrieved from an AJAX GET request into an object using JQuery?

$.ajax({ method:"get", url:"/wall", data:"ajax=1", beforeSend:function(){}, success:function(html){ $("#grid_mason").append(html); //Inserting additional co ...

javascriptjqueryhtmlcsstemplates

Showing data from a Node.js Express application in a Jade template file

I am encountering an issue with my simple jade page where not all variables passed from the javascript route are displaying correctly. I have attempted to implement the solution described in this answer, but it seems to be ineffective in my case. My goal i ...

javascriptnode.jsexpressviewpug

Execute a node script file at random intervals

I've been utilizing forever to maintain the continuous execution of a node script: forever start script1.js However, my requirement is to run these files in a random order... For instance: Execute node script1.js Execute node script2.js Run script ...

javascriptnode.jsnpm

What is the best method for linking JavaScript to Python while exchanging data in JSON format bidirectionally?

I am currently exploring methods to establish a local connection between a Python server and a Javascript client by utilizing JSON format for the retrieval of data. Specifically, I aim to execute queries on the HTML client side, transmit these queries to t ...

javascriptpythonjsonweb-servicessqlite

Check to see if the menu item exceeds the allotted space, and if so, display the mobile menu

Currently, I am in the process of creating a unique responsive menu for my website that I think will need some JavaScript implementation. My skills with JavaScript are not very strong, so I am looking for guidance, code examples, or resources that can assi ...

javascriptjqueryhtmlcss

Remove checked rows in a table with a single click

I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation. Here is the code for the Delete button: <tr id="deleteproject" > <td wi ...

javascripthtmlcsshtml-table