How to open and close one drop down ul list

How to open and close one drop down ul list - javascript

I have five different "ul" width nested "ul" "li",
I want to open current "ul" and its nested "ul" "li."
Below image will give you an idea of exactly what I want.
This is my script....
<script>
$(function() {
$('li.parent').on('click', function () {
var $menuItem = $(this),
$submenuWrapper = $('> .wrapper1', $menuItem);
var menuItemPos = $menuItem.position();
$submenuWrapper.css({
top: menuItemPos.top,
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 1.1)
});
$('.wrapper1 .wrapper1').hide()
$(this).find('.wrapper1 ').show();
$(this).find('li').css({ 'visibility': 'visible', 'height': '22px' });
});
$(".wrapper1:first-child").click(function () {
$(this).next(" .wrapper1:first-child").click();
$(this).find('li:first-child').css({ 'visibility': 'visible', 'height': '22px' });
});
});
</script>
css file...
.wrapper1 {
position: relative;
}
.wrapper1 >li:first-child
{
diaplay:block;
height:25px;
}
.wrapper1 ul {
width: 200px;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
left: -1px;
top: 23px;
background: #fff;
border: 1px solid #b1bbc4;
width: 220px;
height: auto;
z-index: 300;
}
.wrapper1 li {
position: static;
width:100%;
}
.wrapper1 li a{
color:#000;
display: block;
height: 25px;
line-height: 26px;
color: #000;
text-decoration: none;
background: url(../ImagesNew/leftpanel/folder.png) no-repeat 5px;
padding-left: 28px;
}
li .wrapper1 {
position: absolute;
z-index: 10;
display: none;
}
.wrapper1 li ul {
margin: 0;
}
li .wrapper1 li {
background:#fff;
}
li .wrapper1 li a{
background: url(../ImagesMonoBlue/general/i-survey.gif) no-repeat 2px 6px;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li .wrapper1 li a:hover{
background: #cfd8dc url(../ImagesMonoBlue/general/i-survey.gif) no-repeat 2px 6px;
}
Html code.....
<!--first portion of ul-->
<div class="wrapper1">
<ul>
<li>Select survey--</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper1">
<ul>
<li>Jkl</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
</ul>
</div>
<!--first portion of ul ends here-->
<!--second portion of ul-->
<div class="wrapper1">
<ul>
<li>Select survey--</li>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper1">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Xyz</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
<li class="parent">Abc >
<div class="wrapper1">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
<!--second portion of ul ends here-->
The above code is just a demo and has different values. I'm using the same demo in below image code.

Related

JQuery selector change every 3 item

I'm working with PHP loops and creating multiple li in one ul.
The problem is, that I need to show every fourth li when I click on one of the three previous li.
At the moment It only works with the first previous li with this:
$('.last_news li').on('click', function(){
$('+ .actu_details',this).toggleClass('expend');
});
Anyone got some clues
$('.last_news li').on('click', function() {
$('+ .actu_details', this).toggleClass('expend');
});
last_news {
padding: 35px
}
ul {
padding-left: 0px;
margin: 0;
overflow: hidden;
}
ul li {
list-style-type: none;
cursor: pointer;
float: left;
width: 33%;
height: 250px;
background-color: red;
margin-right: 0.5%;
margin-bottom: 5px;
color: #FFF;
position: relative;
}
li:nth-of-type(3) {
margin-right: 0;
}
li:nth-of-type(4n+7) {
margin-right: 0;
}
li.actu_details {
width: 100%;
height: 0px;
background-color: green;
display: block;
}
li.actu_details.expend {
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
<div class="contenu_grid">
<ul>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
</ul>
</div>
</section>

You can use nextAll() to target following sibling actu_details element then use :first/:eq(0)/.eq(0)/.first() to target first li
$('.last_news li').on('click', function () {
$(this).nextAll('.actu_details:first').toggleClass('expend');
//$(this).nextAll('.actu_details').eq(0).toggleClass('expend');
});
$('.last_news li').on('click', function() {
$(this).nextAll('.actu_details:first').toggleClass('expend');
});
.last_news {
padding: 35px
}
ul {
padding-left: 0px;
margin: 0;
overflow: hidden;
}
ul li {
list-style-type: none;
cursor: pointer;
float: left;
width: 33%;
height: 250px;
background-color: red;
margin-right: 0.5%;
margin-bottom: 5px;
color: #FFF;
position: relative;
}
li:nth-of-type(3) {
margin-right: 0;
}
li:nth-of-type(4n+7) {
margin-right: 0;
}
li.actu_details {
width: 100%;
height: 0px;
background-color: green;
display: block;
}
li.actu_details.expend {
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
<div class="contenu_grid">
<ul>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
</ul>
</div>
</section>
Fiddle

Input box wrong positioning in menu

I tried to add an input box to the most right side of the bar on the same line as those menu bars, but everytime its positioned bad or its not even there. Can you help me with this? It needs to be in the menu bar because of my JS hide-on-scroll function. I'm trying to use JQuery-ui's
DatePicker ("$(function() {
$("#datepicker").datepicker();
});")
HTML:
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tretie {
right: 0;
}

check this fiddle. what i did was, made your nav display as block. and centered it with margin:auto. then added the text bar next to it. made it float and with margin-top i moved it up so it's in right place.
<body>
<!--MENU BAR!-->
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
<input type="text" class="tib" />
</nav>
body,nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* menu*/
nav {
display: inline-block;
position: fixed;
width: 100%;
/* text-align: center; */
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav ul > li > a{
text-align:center;
}
ul.nav{
margin:auto;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
/* display: inline-block; */
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tib{
float:right;
margin-top:-28px;
}

Better approach for User Profile bar

I am currently stuck with a small issue here. I have used a mark-up like this:
Snippet
$(function () {
$(".more-options").click(function () {
$(this).closest(".user-profile").toggleClass("open");
return false;
});
});
/* Reset */
* {margin: 0; padding: 0; list-style: none; font-size: 12pt;}
a {text-decoration: none;}
/* Main CSS */
.user-profile {border: 1px solid #999; overflow: hidden; position: relative; margin: 25px 0;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;}
.user-profile p:first-child {margin: 3px 0 0;}
.user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;}
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;}
.user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;}
.user-profile .more-options-list li a {padding: 5px;}
.user-profile.open .more-options-list {display: block;}
.user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;}
/* Testing Sizes */
.user-profile.default {width: 250px;}
.user-profile.mobile {width: auto;}
.user-profile.large {width: 500px;}
.user-profile.small {width: 100px;}
/* Background Image, Can be ignored. */
.user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAXFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KQ+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="user-profile default">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile mobile">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile large">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile small">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
Problem
I am trying to design a User Profile Bar, which when live, it should be this way:
This is what I am trying to achieve here, when the button is clicked. And also what happens is, the menu doesn't get displayed, because I have used overflow: hidden; to clear the floats. The menu is hidden inside.
I would like that to be responsive (well, just using percentages of width in different screen resolutions and instances), I would like them to display this way:
Is there a better way to achieve it? Also I am not sure how I could make the ellipsis to show, if the size is too small, see the mobile class in the snippet.
Preview
For those, who cannot preview the snippet, it would display this way:
Default view.
Arrow has been clicked.

You need to use positioning for this case. This is a case of Fixed-Fluid Model:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
To tackle this, you need to make the fixed content to be positioned absolute and I guess, being a fixed content, you will surely know the dimensions. And give the parent position: relative and a padding-left and min-height of those dimensions. You should never use overflow: hidden or floats in this case. So remove both from your CSS and make these changes:
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} /* Remove overflow: hidden; */
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px;} /* Remove float: left; */
Instead, as said before, add padding, min-height for the parent and position: absolute for the child:
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;}
The mysterious 68px:
The 68px is calculated by this way:
Left Margin: 5px
Left Border: 1px
Left Padding: 3px
Width: 50px
Right Padding: 3px
Right Margin: 1px
Right Border: 5px
So, 5px + 1px + 3px + 50px + 3px + 1px + 5px = 68px.
Text Ellipsis
For the ellipsis to work on major browsers, you can use the following code:
(selector) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Just add this to the .user-profile p rule:
.user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
Also, it is always better to have a z-index in place for position: absolute items to work well with other similar items. So please add:
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;}
So, the final code would be:
$(function () {
$(".more-options").click(function () {
$(this).closest(".user-profile").toggleClass("open");
return false;
});
});
/* Reset */
* {margin: 0; padding: 0; list-style: none; font-size: 12pt;}
a {text-decoration: none;}
/* Main CSS */
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;}
.user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.user-profile p:first-child {margin: 3px 0 0;}
.user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;}
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;}
.user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;}
.user-profile .more-options-list li a {padding: 5px;}
.user-profile.open .more-options-list {display: block;}
.user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;}
/* Testing Sizes */
.user-profile.default {width: 250px;}
.user-profile.mobile {width: auto;}
.user-profile.large {width: 500px;}
.user-profile.small {width: 100px;}
/* Background Image, Can be ignored. */
.user-profile .more-options {background-image: url("data:image/png;base64,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");}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="user-profile default">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile mobile">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile large">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile small">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
Preview
This is how it appears with and without the menu open.
Hope this helps you to achieve what you want.

The problem is that you don't want to hide the overflow, you want to establish a Block Formatting Context. And yes, overflow: hidden establishes a BFC as a side effect, but that's just a hack. In CSS2.1 there are other ways of establishing a BFC, but all have its own problems, like taking out-of-flow, becoming inline-level, ...
Display L3 introduces a proper way of establishing BFCs:
display: flow-root;
But browsers don't support it yet. So meanwhile, I recommend clearance hacks:
.wrapper::after {
content: '';
clear: both;
display: block;
}
$(function () {
$(".more-options").click(function () {
$(this).closest(".user-profile").toggleClass("open");
return false;
});
});
.user-profile:after {
content: '';
clear: both;
display: block;
}
/* Reset */
* {margin: 0; padding: 0; list-style: none; font-size: 12pt;}
a {text-decoration: none;}
/* Main CSS */
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;}
.user-profile p:first-child {margin: 3px 0 0;}
.user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;}
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;}
.user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;}
.user-profile .more-options-list li a {padding: 5px;}
.user-profile.open .more-options-list {display: block;}
.user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;}
/* Testing Sizes */
.user-profile.default {width: 250px;}
.user-profile.mobile {width: auto;}
.user-profile.large {width: 500px;}
.user-profile.small {width: 100px;}
/* Background Image, Can be ignored. */
.user-profile .more-options {background-image: url("data:image/png;base64,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");}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="user-profile default">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile mobile">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile large">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="user-profile small">
<img src="http://placehold.it/50" class="user-thumb" />
<div class="user-profile-meta">
<p><strong>Username</strong></p>
<p><span>Designation</span></p>
</div>
More Options
<ul class="more-options-list">
<li>Profile</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>

Can't center <UL>

I have this dynamic UL, and I need it to be centered in my page.
Here is my HTML:
<ul id="nav">
<li><div class="tabquad">First</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
<li><div class="tabquad">Second</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Four</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Five</div></a></li>
</ul>
</li>
<li><div class="tabquad">Third</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
</ul>
My CSS:
.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 15em;
}
#nav li {
float: left;
width: 15em;
}
#nav li ul {
position: absolute;
width: 15em;
left: -999em;
}
.item{
color:#0E4063;
text-decoration:none;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
My JS:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
How do I center the whole thing?
Here you can find a test on jsfiddle
EDIT: I need 3 columns, all centered in my page.

Add this after your first #nav definition:
#nav {
width: 45em;
margin: 0 auto;
}
http://jsfiddle.net/GeraldS/ZGLtn/2/

If you don't want to give fixed width to the ul then add a outer div to ul and give text-align:center to the outer div
HTML
<div class="wrap">
ul goes here
</div>
CSS
.wrap{text-align:center}
DEMO

Use marginLeft and marginRight 'auto' with a width for the UL tag so that the left and right margin is automatically taken. For instance,
ul{
width: 300px;
margin: 0 auto; /* This center aligns the ul horizontally */
}

#nav {
width: 45em;
margin: 0px auto;
padding: 0px;
list-style: none;
}

Menu Javascript Multi Level Overlapping

I implemented a javascript menu onto my site
http://www.ogormanconstruction.co.uk/work
If you select 'Work' then 'Contact' the two sub menus overlap
Is there a way to ensure that only the submenu that is selected is displayed?
This is the javascript I am using
<script type="text/javascript">
$(document).ready(function(){
$('#menu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#services').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>
<div id="menu" class="menu clearfix">
<div class="toggle">Work</div>
<div class="items">
<ul>
<li>Basingstoke Treatment Works</li>
<li>Project Two</li>
<li>Project Three</li>
<li>Project Four</li>
<li>Project Five</li>
<li>Project Six</li>
</ul>
</div>
</div>
<div id="menu2" class="menu clearfix">
<div class="toggle">Contact</div>
<div class="items">
<ul>
<li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li>
</ul>
</div>
</div>
<div id="services" class="menu clearfix">
<div class="toggle">Services</div>
<div class="items">
<ul>
<li>Site Logistics</li>
<li>Waste Management</li>
<li>Security Services</li>
<li>Traffic Management</li>
<li>Multi Service Gangs</li>
<li>Facilities & Accommodation</li>
<li>Small Works & Maintenance</li>
<li>Catering Services</li>
</ul>
</div>
</div>
This is the CSS
#menu {
position: relative;
top: 435px;
left: -13px;
width: 60px;
height: 25px;
}
#menu2 {
position: relative;
top: 438px;
left: -14px;
width: 60px;
}
#services {
position: relative;
top: 470px;
left: -14px;
width: 60px;
}
.menu .items a:hover {
text-decoration: none;
}
.menu .items a {
font-size: 11px;
color: #ABA099;
text-decoration: none;
}
.menu .items {
left: 180px;
width: 250px !important;
}
.menu .items li {
width: 250px;
line-height: 19px;
font-size: 11px;
color: #ABA099;
height: 19px;
}
.menu .items li a:hover {
color: #4D4D4F;
}
.menu .toggle {
color: #ABA099;
font-weight: normal;
}
.menu .toggle-hover {
color: #4D4D4F;
}

Move all your LI styles to your A tag. Use display:block for your A-tag.

We Keep Coding

JavaScript is the programming language of the Web.

How to open and close one drop down ul list - javascript

Related

JQuery selector change every 3 item

Input box wrong positioning in menu

Better approach for User Profile bar

Can't center <UL>

Menu Javascript Multi Level Overlapping

Categories

Resources