We Keep Coding

Creating a vertical list of text that changes order on click

I am trying to modify the example found here:
div {
width: 200px;
margin: 30px;
}
h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 200px;
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}
<div>
<ul>
<li>Zurich</li>
<li>Geneva</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
So that:
The middle item in the list is already expanded at start
OnClick of any other elements the list shifts and the clicked item will move to the middle and be expanded
The opacity of the first and last elements of the list are decreased
Is this accomplishable in javascript or CSS? I have been reading about nth-child but I am trying to understand how to actually implement it. I understand nth-child can help me with the opacity case but is the only way to reorder the list (and animate the reordering eventually) possible with javascript? Or is CSS animations the way to go?

Element Keeps Leaving Div When Resized

I've been searching around and I haven't found any answers for my particular case. I want to have a search form aligned to the right of the page but for it always to be aligned with the div it is located in. I have resorted to absolute positioning but I would much rather find a cleaner way to do this with out me having to constantly change the value of the style "Top: ;"
Here is a link to the code: https://jsfiddle.net/nz4u376r/
And here is a snippet:
CSS:
/*----- Toggle Button -----*/
.toggle-nav {
display: none;
}
.toggle-nav-button {
color: #FFF;
padding: 12px;
transition: color 0.3s ease;
max-width: 45px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.toggle-nav-button:hover {
color: #0d2c87;
background-color: #909f8e;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
#media screen and (max-width: 970px) {
.toggle-nav {
float: left;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
color: #FFF;
font-size: 18px;
text-decoration: none;
}
.active {
display: none;
}
}
/*-- Toggle Button End --*/
/*---- Main Nav CSS ----*/
/*Colors: #0d2c87 #7E8F7C | http://www.hexcolortool.com/7E8F7C#909f8e | */
.menu {
background-color: #7E8F7C;
height: 48px;
width: 100%;
}
nav ul {
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
max-width: 190px;
width: 100%;
}
nav a {
background: #7E8F7C;
color: #FFF;
display: block;
font: 16px/48px sans-serif;
text-align: center;
text-decoration: none;
}
.header-li:hover {
background: #909f8e;
color: #0d2c87;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
nav li ul li:hover a {
background: #909f8e;
color: #0d2c87;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 11;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
nav li:hover ul {
opacity: 1;
top: 48px;
visibility: visible;
}
nav li ul li {
float: none;
}
nav li ul a:hover {
background: #909f8e;
}
/*-- Main Nav CSS End --*/
/*--- Nav SearchBar ---*/
.search-form {
display: inline-block;
position: relative;
margin-top: 8px;
margin-right: 8px;
float: right;
}
.search-form input {
width: 200px;
height: 30px;
padding: 0px 8px;
font-size: 13px;
float: left;
}
.search-form input:hover,
input:focus {
border-top: 1px ridge #3292E0;
border-bottom: 1px ridge #3292E0;
border-left: 1px ridge #3292E0;
}
.search-form button {
height: 30px;
/*#66a992 #0d2c87 */
color: #FFF;
border: none;
padding: 5px;
background-color: #0d2c87;
}
.search-form button:hover {
opacity: 0.8;
-webkit-transition: opacity .4s ease;
-moz-transition: opacity .4s ease;
-ms-transition: opacity .4s ease;
-o-transition: opacity .4s ease;
transition: opacity .4s ease;
}
.search-from-drop {
display: none;
}
#media screen and (max-width: 1250px) {
.search-form input {
width: 120px;
}
.active-search {
display: none;
}
.search-from-drop {
display: inline-block;
}
}
#media screen and (max-width: 1125px) {
.search-form {
display: none;
}
}
#media screen and (max-width: 840px) {
.search-form {
display: inline-block;
right: 5%;
position: absolute;
top: 72px;
}
.search-form {
float: left;
}
}
<nav class="menu">
<ul class="active">
<li>
<a class="header-li" href="">Home</a>
</li>
<li>
<a class="header-li" href="">Our Company</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Services</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Products</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Resources</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
</ul>
<ul class="toggle-nav">
<li>
<div class="toggle-nav-button" href="#">☰</div>
<ul>
<li>Home
</li>
<li>Our Company
</li>
<li>Services
</li>
<li>Products
</li>
<li>Resources
</li>
</ul>
</li>
</ul>
<form class="search-form">
<input type="text">
<button><span class="active-search">Search</span><span class="search-from-drop">🔍</span>
</button>
</form>
</nav>

I found my mistake and I figured I would answer my question.
The error was that I was making an absolute value of top and right when all I needed was an absolute value for right, so after changing...
This:
.search-form {
display: inline-block;
right: 5%;
position: absolute;
top: 72px;
}
Into this:
.search-form {
display: inline-block;
right: 5%;
position: absolute;
}
Everything works fine. No longer have to worry about changing specific values every time a height changes on the header or nav.
Thanks for your help!

Expand li element to fit content

I am trying to get the parent li (menu item) to widen (horizontally) on hover to fit all of the ul li items (submenu items) without hardcoding a width so no text is floating or cut off.
I am making a menu using an unordered list. Each submenu item is within the li tags of the main menu. My menu is horizontal and shows the submenu items when you hover over the elements.
I have tried various ways to try and get the li element to expand to the size of the submenu items or stay the same size if they are smaller. My clunky but working way was to hardcode a width of 22% on hover. I was wondering if there was a way to do this and to nicely fit the text rather than have a lot of white space. Hardcoding the width also causes menu items without submenu items to expand (I could work around this but I don't want to hardcode it to begin with).
I need to do this entirely in vanilla html, css, and javascript. It would also be nice if the solution were cross-browser compatible.
I apologize if my code is non-conventional, I have been trying to teach myself css. Thank you in advance.
The following is an example of my HTML/CSS (minus the links):
body {
margin: 0;
}
*{
font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
background-color: #f1f1f1;
text-align: center;
}
#navbaritems {
margin: 0 auto;
}
#navbaritems ul {
padding: 0;
width: 100%;
list-style-type: none;
margin: 0;
display: inline;
position: relative;
font-size: 0;
}
#navbaritems ul li {
display: inline-block;
white-space: nowrap;
text-align: center;
color: #000;
position: relative;
}
#navbaritems ul li ul {
width: 100%;
padding: 0;
position: absolute;
top: 6vh;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#navbaritems ul li ul li {
background-color: #f1f1f1;
display: block;
}
#navbaritems ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#navbaritems ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 22%;
}
#navbaritems ul li ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 100%;
}
#navbaritems ul li a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-size: 1vw;
display: block;
height: 4vh;
line-height: 4vh;
color: #808080;
text-decoration: none;
padding: 1vh;
margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
background-color: #82c986;
color: #ffffff;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
display: block;
}
#navbaritems ul li a.active {
color: #ffffff;
background-color: #4CAF50;
}
<div id="navbar" class="addBottomShadow">
<div id="navbaritems">
<ul>
<li><a class="active">Home</a>
</li>
<li><a>Patient Eligibility</a>
<ul>
<li><a>Eligibility Tracker</a>
</li>
</ul>
</li>
<li><a>Claim Status</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li><a>E-Claims Batch Status</a>
</li>
<li><a>Fees</a>
<ul>
<li><a>Update Fees</a>
</li>
<li><a>Reimbursement Report</a>
</li>
<li><a>Reimbursement Detail Report</a>
</li>
<li><a>Submit Fees</a>
</li>
</ul>
</li>
<li><a>Inquiries</a>
<ul>
<li><a>Customer Service Inquiries</a>
</li>
<li><a>COB Change Requests</a>
</li>
<li><a>Submit Inquiry</a>
</li>
</ul>
</li>
<li><a>Settings</a>
<ul>
<li><a>Procedure Sets</a>
</li>
<li><a>Eligibility Tracker</a>
</li>
<li><a>Claim Settings</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li></li>
</ul>
</li>
<li><a>Other</a>
<ul>
<li><a>Provider Seminars</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

The big problem here is that the parent li element only knows to be as big as the main a until hover because the child ul has display:none; which means the width is effectively 0. Instead of using display:none; you could try forcing the height to be 0 and leaving the initial width. Then on hover, do height:inherit; to display the menu items. Remember to use overflow:hidden; so things don't go outside of the element when the height isn't big enough for them.
EDIT: Needed to do some more work, but I think this is what you are looking for.

How to convert unordered list into <select> dropdown using jquery?

How do I convert an unordered list in this format
<ul class="selectdropdown">
<li>one</li>
<li>two</li>
<ul>
<li>two One</li>
<ul>
<li>two One One</li>
</ul>
<li>twoTwo</li>
</ul>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
I want to convert this structure into <select> structure

jquery code
jQuery('.selectdropdown li a').each(function() {
var el = jQuery(this);
jQuery('<option />', {
"value" : el.attr('href'),
"text" : el.text()
}).appendTo('#top select');
});
if (jQuery('.selectdropdown li a').length < 1) jQuery('#top').hide();
jQuery('#top').find('select').change(function() {
window.location = jQuery(this).find('option:selected').val();
});
HTML
<div id="top">
<select></select>
</div>
Here Is fiddle Fiddle Link

Try Something like This:
ul.dark_menu {
list-style: none;
padding: 5px 1px;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 16px;
letter-spacing: 0.01em;
font-smooth: always;
color: #000000;
line-height: 15px;
margin: auto;
width: 1018px;
position: relative;
background: #2B5797;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;}
ul.dark_menu li {
float: left;
position: relative;
margin: 1px;}
/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a, ul.dark_menu li a:link {
color: #fafafa;
text-decoration: none;
display: block;
padding: 8px 26px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a:hover {
color: #fafafa;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a.selected {
border-right: 1px solid #ddd;
text-transform: uppercase;
margin-left: 10px;
}
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #fafafa;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
ul.dark_menu li ul {
display: none;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;}
ul.dark_menu li ul {-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;top:55px;}
ul.dark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
left: 0;border-radius: 0px 0px 5px 5px;
top: 37px;
padding: 5px 0;
list-style: none;
background: #fff;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li ul li {
float: none;
margin:0px;}
ul.dark_menu li ul li:first-child {
margin:0px;
border-top: 0 none;}
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu [data-role="dropdown"] > a::before {
position: absolute;
content: "^";
display: block;
font-size: 15px;
left: 100%;
margin-left: -20px;
top: 10px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #222;
display: block;
background: transparent none;
padding: 10px 25px 10px 25px;
white-space: nowrap;}
ul.dark_menu li ul li a:hover {
background:#2D89EF;-moz-transition: all 0.1s ease-in-out;color:#fff;
-webkit-transition: all 0.1s ease-in-out;
}/* Blog johanes djogzs.blogspot.com */
.menujohanes{position:relative;}
#search input[type="text"]:hover {width:848px;}
#search input[type="text"] {
background: #fff url("http://3.bp.blogspot.com/-uYZni0pIn-E/T-xY2vVu_-I/AAAAAAAACUY/ZMfR3_BvRFE/s1600/SEARCH_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:27px;}
#main4, #main5, #main6 {
width: 303px;
list-style-type: none;
float: left;
margin: 10px;}
.main3 {width:305px;
list-style-type: none;
padding-top: 10px;
float: left;}
::-webkit-scrollbar {
height:12px;
background: #474747;}
::-webkit-scrollbar-thumb {
background-color: #000;
}
li#sub ul {
display:none;
position: absolute; left: 100%; top:0;
}
li#sub:hover ul{
display: block;
}
<div class='menujohanes'>
<ul class='dark_menu'>
<li data-role='dropdown'>
<a href='#'>
Categories
</a>
<ul>
<li id='sub'>
<a href='#'>
Lorem ipsum
</a>
<ul>
<li>
<a href='#'>
Categories2
</a></li><li>
<a href='#'>
Categories3
</a></li>
</ul>
</li>
<li>
<a href='#'>
Lorem ipsum
</a>
</li>
<li>
<a href='#'>
Lorem ipsum
</a>
</li>
<li>
<a href='#'>
Lorem ipsum
</a>
</li>
<li>
<a href='#'>
Download
</a>
</li>
<li>
<a href='#'>
Lorem ipsum
</a>
</li>
</ul>
</li>
</ul>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search Somethings..' size='40' type='text'/>
</form>
</div>
Got Help From Here:

I've recently created something like this, check it out:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#dropdownSelect").click(function(){
$("#multiSelect").slideToggle("fast");
});
});
</script>
<style>
#dropdownSelect{
cursor:pointer;
color:#000;
padding:7px 20px;
width:400px;
}
#dropdownSelect p{
background: #eee;
width:400px;
}
#multiSelect{
display:none;
height:150px;
background:#ccc;
z-index:1;
overflow:auto;
position:absolute;
width:400px;
color:#000;
top:60px;
left:28px;
}
#multiSelect ul {
list-style:none;
text-decoration:none;
padding-left:10px;
}
#multiSelect li>ul{
list-style:none;
text-decoration:none;
padding-left: 10px;
cursor:pointer;
}
</style>
</head>
<body>
<dl>
<dt id="dropdownSelect">
<p>Choose</p>
</dt>
<dd>
<div id="multiSelect">
<ul>
<li>Link-1</li>
<li>Link-2</li>
<li>Link-3</li>
</ul>
</div>
</dd>
</dl>
</body>

There is this really handy plugin where it will turn your select element into an unordered list for you. I use it all the time because it's pretty sexy and fast.
http://code.octopuscreative.com/fancyselect/

Get confused with Responsive menu with jQuery

My responsove menu works well in mobile menu, but I have one problem that when I resize browser back to large screen size. the mobile menu still appear. Does anybody know why?
Here is my code :
CSS
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover>ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
#media only screen and (max-width:479px) {
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
}
HTML :
<a href="#" id="rwd-nav-btn" >☰</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->
<nav class="main-navigation">
<ul class="fr">
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
jQuery :
jQuery(document).ready(function(){
jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav');
jQuery('#rwd-nav-btn').click(function(event){
event.preventDefault();
jQuery('.rwd-nav').slideToggle();
});

There is no code which hides the menu. Instead of slideToggle, I suggest to add/remove a class like "closed" and "open" and set mymenu.closed to display:none and inside the media query set mymenu.open to display:block