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.
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.
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
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>
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.
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> ...
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 ...
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 ...
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('.& ...
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"> ...
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 ...
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 ...
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 ...
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 ...
Could HTML or CSS comments potentially lead to rendering issues? HTML Comment Example: <!-- additional details --> CSS Example: /* more information */ ...
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 ...
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 ...
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 ...
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. ...
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 ...
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 ...
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. ...
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 ...
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 ...
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- ...