Steps for developing a user settings dropdown menu:

Seeking assistance in developing a user setting drop-down menu resembling the design of Facebook and Google on the right side. Please refer to the image attached for reference. Any guidance or support would be greatly appreciated.

Answer №1

Yes, I managed to achieve the desired style

enter code here

  <div class="container">




            <div class="wrapper-demo">

                <div id="dd" class="wrapper-dropdown-5" tabindex="1">
                    <div id="image">    </div>
                    <ul class="dropdown">
                        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
                        <li><a href="#"><i class="iconcog"></i>Settings</a></li>
                        <li><a href="#"><i class="icon-remove"></i>Logout</a></li>
                    </ul>
                </div>
            </div>


    </div>



enter code here

*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}



.wrapper-demo {
margin: 60px 0 0 0;
*zoom: 1;
font-weight: 400;
}




 .wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 100px;
margin: 0 auto;
padding: 12px 15px;
height: 50px;
/* Styles */
background: #2F3B31;
border-radius: 0px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
 }
#image
{ 
width:45px;
height:46px;
border:solid #666;
border-radius:5px;
-moz-border-radius: 5px;
background-image: url("http://i.imgur.com/kLz97bG.png?1");
-webkit-border-radius:5px;
margin-top:-10px;
margin-left:-8px;
}

 .wrapper-dropdown-5:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #9F9F9F transparent;


 }

 .wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;

/* Styles */
background: #9F9F9F;
border-radius: 0px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

/* Hiding */
max-height: 0;
overflow: hidden;
   }
.dropdown
{ 
width:200px;
 }

  .wrapper-dropdown-5 .dropdown li {
  padding: 0 10px ;

  }

 .wrapper-dropdown-5 .dropdown li a {

  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px 0;
  transition: all 0.3s ease-out;
  border-bottom: 1px solid #e6e8ea;
  }

 .wrapper-dropdown-5 .dropdown li:last-of-type a {
 border: none;
 }

 .wrapper-dropdown-5 .dropdown li i {
  width:200px;
 margin-right: 5px;
 color: inherit;
 vertical-align: middle;
 }

 /* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
color: #FFFFFF;

 }

/* Active state */

.wrapper-dropdown-5.active {
 border-radius: 0px 0px 0 0;
 background: #949594;
 box-shadow: none;
 border-bottom: none;
 color: white;
  }

 .wrapper-dropdown-5.active:after {
 border-color: #82d1ff transparent;
  }

 .wrapper-dropdown-5.active .dropdown {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  max-height: 400px;
  }

js

enter code here
        function DropDown(el) {
            this.dd = el;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('click', function(event){
                    $(this).toggleClass('active');
                    event.stopPropagation();
                }); 
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-5').removeClass('active');
            });

        });

working example jsFiddle

Answer №2

Check out the following link:

Javascript snippet:

<script type="text/javascript">
$(document).ready(function()
{

$(".user").click(function()
{
var Y=$(this).attr('id');
if(Y==1)
{
$(".submenu-list").hide();
$(this).attr('id', '0'); 
}
else
{
$(".submenu-list").show();
$(this).attr('id', '1');
}

});

//Mouse click on submenu list
$(".submenu-list").mouseup(function()
{
return false
});

//Mouse click on user section
$(".user").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu-list").hide();
$(".user").attr('id', '');
});
});
</script>

HTML code:

<div class="dropdown-section">
<a class="user">User Section</a>

<div class="submenu-list">
<ul class="parent">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Services">Services</a></li>
</ul>
</div>

</div>

Answer №3

Here is a suggestion for you to try.

CSS

When styling your HTML elements, remember to reset the default browser styles first before adding your custom styles. This will help ensure consistent and predictable layout across different browsers.

For example:
html, body {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2em;
}

HTML Markup

<!-- Remember to include necessary meta tags and links to external CSS files in your HTML markup. -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <h1>Welcome to Our Website</h1>
      <p>This is a paragraph of text.</p>
    </div>
  </body>
</html>

Always make sure to test your code on different browsers and devices to ensure compatibility and responsiveness.

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

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

Updating the web browser does not display the changes made on the page

Currently diving into the world of Angular and I've successfully cloned the repository. After installing the dependencies using npm, I have the web server up and running smoothly. Accessing the page on localhost:4000 works like a charm. Interestingly ...

Having trouble with saving the image after integrating Ajax into the code

My PHP file upload script simplifies the process, as shown below: <?php $path = 'uploads/'; $file_ext = array('jpg','png','gif','bmp','JPG'); $post_ext = end(explode('.& ...

Using Bootstrap's fourth version grid system

Struggling with creating a layout on bootstrap4? Here's a code snippet to help you out. Thank you in advance! <div class="col-8"> <a href="#"> <div class="card"> <img class="card-img" src="img.jpg"> ...

Issue with change event not firing upon page load

In my production record creation page, I have implemented functionality to handle different line, shift, and date combinations. There are drop down menus for selecting the line and shift, as well as a jQuery date picker for selecting the date. One issue I ...

Leveraging jQuery's $.post method in the Firefox browser

Currently, I am experimenting with the following form: <form id="form" action="" method="post"> <input type="text" name="firstname"> <input type="text" name="lastname"> <input type="submit" value="Submit" id="submit"> </fo ...

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

Is it possible for comments in HTML and CSS to cause issues with rendering?

Could HTML or CSS comments potentially lead to rendering issues? HTML Comment Example: <!-- additional details --> CSS Example: /* more information */ ...

Develop websites for specific iOs versions as well as various Android versions

When it comes to targeting specific versions of Internet Explorer, conditional comments or hacks can be used. Is there a similar method for targeting different versions of iOS? I'm facing an issue with my website functioning perfectly on iOS 4.2 and ...

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

What is preventing me from extracting all information from online shopping sites?

Recently, I've been tackling a project that involves scraping data from various e-commerce websites. However, I've encountered difficulties in extracting the desired information from these sites. For instance, when attempting to scrape all the li ...

An interesting quirk within CSS is that when a field is hidden, it can

I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...

Ways to deselect checkboxes with Typescript and Jquery

I have a set of checkboxes all labeled with the same 'types' class. There is a button on my webpage that should be able to toggle between selecting and deselecting all the checkboxes in this group. When checking the boxes, I use the following sc ...

Utilizing one URL to post parameters and retrieving JSON data from a different URL

Currently I am working with jQueryMobile and PhoneGap, but encountering an issue. I am trying to retrieve details in JSON format by posting parameters to one URL (URL1) and receiving the JSON response from another URL (URL2). However, I am unable to access ...

Guidelines for implementing a logout feature in Django using templates

Here is my views.py file: from django.shortcuts import render from django.views.decorators.csrf import csrf_exempt import os # Create your views here. @csrf_exempt def index(request): if('loggedIn' in request.session): id = request. ...

What is the best way to capture the current URL and store it in a variable using VB and ASP.NET?

There is a form available for users to fill out and submit, and I have VB code that converts the submitted form into an email sent to me. In order to identify which page the submission is coming from, I am looking to assign the current URL to a variable th ...

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

What is the method for obtaining the contents of innerHTML elements?

list.innerHTML = ` <p id="text" class="text">${toDoItem.task}</p> <div id="taskListBtn"> <span id="button-tick-${toDoItem.id}" class="material-icons tick-style">check_circle</span> <span id="button-edit- ...