I'm trying to use onClick and toggleClass to change display:none to display:block on the parent elements which contain a child element that contains a certain text.
I.e., I want to show the parent div (or multiple divs) record when it contains the two letter state abbreviation, AK in li.address span.state.
But, it's not working. Fiddle https://jsfiddle.net/ky23ne1w/9/
$(".state-button-ak").on("click", function(e) {
if ($(".record li.address span.state:contains(AK)")) {
$(".record li.address span.state:contains(AK)").parent().toggleClass("display-block");
e.preventDefault();
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.display-none {
display: none;
}
.display-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-al">Alabama</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Anchorage, <span class="state">AK</span>
</li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AL</span>
</li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span>
</li>
</ul>
</div>
It is a really strange approach, why not work with data-attributes or specific classes to target the elements.
The parent in your case is li with address class, not the div with record class.
$('.state-button').on('click', function(){
let _this = $(this);
if(!_this.hasClass('active')){
$('.display-block ').removeClass('display-block ');
$('.state-button.active').removeClass('active');
_this.addClass('active');
let state = _this.text().substring(0,2).toUpperCase();
if(state === 'AL')
state = 'AK';
$('span.state:contains('+state+')').closest('.record').addClass('display-block');
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.display-none {
display: none;
}
.display-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-ar">Arkansas</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AR</span></li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>
This is an example using data-attributes:
$('.state-button').on('click', function(){
let _this = $(this);
if(!_this.hasClass('active')){
$('.state-button.active, .record.active').removeClass('active');
$('[data-state='+_this.data('state')+']').addClass('active');
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.record.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<div class="record" data-state="AK">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
</ul>
</div>
<div class="record" data-state="AR">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AR</span></li>
</ul>
</div>
<div class="record" data-state="CA">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>
Related
How to make one of the li circles in .sidebar-nav change the background color to white when you click on one of the li in the .sidebar-menu, by adding the .actived class to it? Moreover, when one of the li in the .sidebar-menu is clicked, the circle from the .sidebar-nav should change color in accordance with the element that was clicked. For example, they clicked on the "Business card site" and the first circle lights up, clicked on the "Internet store" and the third circle lights up.
Site ct03638.tmweb.ru
Code jsfiddle.net/pjzs9uxw/
.actived {
background-color: #fff;
transition: 0.3s;
}
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>
You can use index() of the li which is clicked then using that addClass to same li in your sidebar-nav ul.
Demo Code :
$('.sidebar-menu li a').on('click', function(e) {
e.preventDefault()
var index_ = $(this).closest("li").index() //get index
$('.sidebar-nav li').removeClass('actived');//remove from other
$(".sidebar-nav li:eq(" + index_ + ")").addClass('actived'); //add class where index is same
});
.actived {
background-color: red;
transition: 0.3s;
}
.sidebar-nav li {
width: 7px;
height: 7px;
border: 1px solid black;
border-radius: 50px;
margin-right: 5px;
cursor: pointer;
}
.sidebar-nav {
list-style: none;
display: flex;
justify-content: flex-start;
margin-left: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>
Add click event listener on sidebar-menu ul element and capture the index of clicked li element, then get the circle element of same index and add active class on it and remove the active class from previous highlighted element.
const menuEle = document.querySelector("#side-menu");
let higlightedIndex = -1;
menuEle.addEventListener("click", (e) => {
const listItem = e.target.closest("li");
if (listItem) {
const index = [...menuEle.children].indexOf(listItem);
const list = document.querySelector("#sidebar-nav").children;
if (higlightedIndex >= 0) {
list[higlightedIndex].classList.remove("active");
}
list[index].classList.add("active");
higlightedIndex = index;
}
});
.active {
background-color: #FAE93E;
}
.circle {
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
display: inline-block;
}
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu" id="side-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<div id="sidebar-nav">
<span class="business-card circle"></span>
<span class="landing circle"></span>
<span class="market circle"></span>
<span class="corp circle"></span>
<span class="bitrix circle"></span>
<span class="advertising circle"></span>
<span class="seo circle"></span>
<span class="promotion circle"></span>
<span class="marketing circle"></span>
</div>
</div>
</div>
</div>
</section>
On the click function of your button, try adding a line that sets a class or an attribute to the parent menu element related to this current item. This way you can apply different styles according to the current menu item to the whole menu.
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 2 years ago.
I am displaying 3 div columns all floating left. As windows gets resized to smaller, I want it to get down to 1 column. So far, it's doing that, but when one div gets longer than the other, it all gets out of whack on a normal laptop screen.
enter image description here
The css is:
.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.kolumn {
width: 100%;
}
}
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
...
Any help would be appreciated to get this floats to align left no matter how long are they... am trying to get them in 3 columns... thanks again!
I would strongly consider using display: flex for this instead, since float is going the way of the dinosaurs.
To fix what you have, you need to make sure the 1,4,7, etc. element can clear longer elements. Added:
.kolumn:nth-child(3n+1) {
clear: left;
}
Removed the media query so you can see it in the snippet window.
.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.kolumn:nth-child(3n+1) {
clear: left;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
Here's a flex example:
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.kolumn {
padding: 8px;
flex: 1 0 33.3333%;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.kolumn {
flex: 0 0 100%;
}
}
<div class="wrap">
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
</div>
Here I added a wrap element with display: flex and flex-wrap: wrap to make sure elements wrap:
Then, each .kolumn gets a flex: 1 0 33.3333% property - which is shorthand for flex-grow: 1, flex-shrink: 0, flex-basis: 33.333% - flex-basis is essentially the flex equivalent to width.
Some really good reading on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am fairly new to web development and there is still some issues I can resolve by myself.
I have this code:
HTML:
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
</div>
and this CSS
ul , li {
list-style-type: none;
}
#column{
display: flex;
justify-content: center;
align-items: center;
line-height: 200%;
}
#colunmA{
}
#colunmB{
}
#colunmC{
}
I left rules #colunmA , #colunmB and #colunmC in CSS empty because I don't know what to put in here.
I would like to align all elements that belong to each column together. Also, elements in column C do not align horizontally and vertically with the others columns. I would like to achieve a similar result:
JS Fiddle here: https://jsfiddle.net/gdiop/s9w2ku8q/24/
You are placing your elements in little bit wrong way.
No need to make seperate rules for Column A,B,C. Always try to make general rules which can by applied to n-number of things.
Here is yout updated JSfiddle Demo
I added float and margin property to #column.
CODE:
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
<li class="en">list A6</li>
</ul>
</section>
</div>
</div>
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list b1</li>
<li class="en">list b2</li>
<li class="en">list b3</li>
<li class="en">list c5</li>
</ul>
</section>
</div>
</div>
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list c1</li>
<li class="en">list c2</li>
<li class="en">list c3</li>
</ul>
</section>
</div>
</div>
ul,
li {
list-style-type: none;
}
#column {
display: flex;
justify-content: center;
align-items: center;
line-height: 200%;
float:left;
margin-left:10px;
}
#colunmA {}
#colunmB {}
#colunmC {}
This is based on comments provided by me. note that the css is very simple and same class is applied to all columns A, B, C. i use class instead of id for simpler code:
ul , li {
list-style-type: none;
padding-left: 2px;
}
.columns {
display: block;
text-align: center;
margin: 0 auto;
}
.colunmItem { /* same class for columnA,B,C */
display: inline-block;
text-align: left;
vertical-align: top;
line-height: 300%; /* control line spacing for list items */
margin:0 5%;
}
<div class="columns">
<div class="colunmItem">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB" class="colunmItem">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
<div id="colunmC" class="colunmItem">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list C1</li>
<li class="en">list C2</li>
<li class="en">list C3</li>
</ul>
</section>
</div>
</div>
First remove from #column selector the align-items: center;
then u can add to each of your columns selector margin:0 20px;
for make a space between columns.
ul{
padding:0;
}
ul,
li {
list-style-type: none;
}
#column {
display: flex;
justify-content: center;
line-height: 200%;
}
#colunmA {
margin: 0 20px;
}
#colunmB {
margin: 0 20px;
}
#colunmC {
margin: 0 20px;
}
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
<div id="colunm C">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list C1</li>
<li class="en">list C2</li>
<li class="en">list C3</li>
</ul>
</section>
</div>
I have a bootstrap navbar where the dropdowns open on hover. The problem is, when I click on one link to open the menu and then hover to another link, the initial one stays open. I need it so that only one dropdown menu can be open at a time. I don't mind a js solution.
Here's a bootply: http://www.bootply.com/TcskjKOWfA
/* CSS used here will be applied after bootstrap.css */
#main_navbar .navbar-nav {
margin: 0 auto;
display: table;
table-layout: auto;
float: none;
width: 100%;
}
#main_navbar .navbar-nav > li {
display: table-cell;
float: none;
text-align: center;
}
#main_navbar .dropdown-toggle:active,
#main_navbar .open .dropdown-toggle,
#main_navbar .dropdown-toggle:hover,
#main_navbar .open .dropdown-toggle {
background-color: #fff;
color: #000 !important;
font-weight: 600;
border-top: 1px solid #ccc !important;
border-right: 1px solid #ccc !important;
border-left: 1px solid #ccc !important;
border-bottom: 2px solid #fff !important;
z-index: 1005;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
background-color: #fff !important;
border-color: #ccc;
}
.nav .dropdown-menu {
padding: 20px;
top: 98%;
}
.dropdown-menu {
min-width: 230px;
}
.dropdown-header {
padding-left: 0 !important;
color: #000;
font-weight: 600;
font-size: 14px;
}
li + .dropdown-header {
padding-top: 20px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-4 {
min-width: 766px;
}
.multi-column-dropdown {
list-style: none;
padding-left: 15px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.7;
color: #000;
white-space: normal;
font-weight: 400;
font-size: 15px;
}
.dropdown-menu.multi-column {
padding-bottom: 20px;
}
#main_navbar .multi-column-dropdown a:hover {
opacity: 0.7;
}
#main_navbar .dropdown:hover .dropdown-menu {
display: block;
box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main_navbar">
<ul class="nav navbar-nav">
<!-- Brands Dropdown -->
<li class="dropdown">BRANDS
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">A</li>
<li><a title="A. Lange & Sohne" href="/brand/a-lange-sohne.html">A. Lange & Sohne</a>
</li>
<li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a>
</li>
<li class="dropdown-header">B</li>
<li><a title="Baume & Mercier" href="/brand/baume-mercier.html">Baume & Mercier</a>
</li>
<li><a title="Bedat" href="/items.php?brand=74">Bedat</a>
</li>
<li><a title="Bell & Ross" href="/brand/bellross.html">Bell & Ross</a>
</li>
<li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a>
</li>
<li><a title="Breguet" href="/brand/breguet.html">Breguet</a>
</li>
<li><a title="Breitling" href="/brand/breitling.html">Breitling</a>
</li>
<li><a title="Bremont" href="/items.php?brand=115">Bremont</a>
</li>
<li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a>
</li>
<li class="dropdown-header">C</li>
<li><a title="Cartier" href="/brand/cartier.html">Cartier</a>
</li>
<li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a>
</li>
<li><a title="Chopard" href="/brand/chopard.html">Chopard</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">E</li>
<li><a title="Ebel" href="/brand/ebel.html">Ebel</a>
</li>
<li class="dropdown-header">G</li>
<li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a>
</li>
<li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a>
</li>
<li class="dropdown-header">H</li>
<li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a>
</li>
<li><a title="Hermes" href="/brand/hermes.html">Hermes</a>
</li>
<li><a title="Hublot" href="/brand/hublot.html">Hublot</a>
</li>
<li class="dropdown-header">I</li>
<li><a title="IWC" href="/brand/iwc.html">IWC</a>
</li>
<li class="dropdown-header">J</li>
<li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a>
</li>
<li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">L</li>
<li><a title="Longines" href="/brand/longines.html">Longines</a>
</li>
<li class="dropdown-header">M</li>
<li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a>
</li>
<li><a title="Michele" href="/brand/michele.html">Michele</a>
</li>
<li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a>
</li>
<li class="dropdown-header">O</li>
<li><a title="Omega" href="/brand/omega.html">Omega</a>
</li>
<li><a title="Orbita Watch Winders & Cases" href="/brand/orbita-winders.html">Orbita Watch Winders & Cases</a>
</li>
<li><a title="Oris" href="/brand/oris.html">Oris</a>
</li>
<li class="dropdown-header">P</li>
<li><a title="Panerai" href="/items.php?brand=85">Panerai</a>
</li>
<li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a>
</li>
<li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a>
</li>
<li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a>
</li>
<li><a title="Piaget" href="/items.php?brand=69">Piaget</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">R</li>
<li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a>
</li>
<li><a title="Rolex" href="/brand/rolex.html">Rolex</a>
</li>
<li class="dropdown-header">T</li>
<li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a>
</li>
<li class="dropdown-header">U</li>
<li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a>
</li>
<li class="dropdown-header">V</li>
<li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a>
</li>
<li class="dropdown-header">Z</li>
<li><a title="Zenith" href="/brand/zenith.html">Zenith</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Mens Watches Dropdown -->
<li class="dropdown">MEN'S WATCHES
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All men's watches
</li>
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000
</li>
<li>$2,000 - $5,000
</li>
<li>$5,001 - $8,000
</li>
<li>$8,001 - $12,000
</li>
<li>$12,001 and up
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP MEN'S SALE</li>
<li>All men's sale
</li>
<li class="dropdown-header">SHOP SALE BY PRICE</li>
<li>under $2,000
</li>
<li>$2,000 - $5,000
</li>
<li>$5,001 - $8,000
</li>
<li>$8,001 - $12,000
</li>
<li>$12,001 and up
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY MOVEMENT</li>
<li>Quartz
</li>
<li>Automatic
</li>
<li>Manual Wind
</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Ladies Watches Dropdown -->
<li class="dropdown">WOMEN'S WATCHES
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All women's watches
</li>
<li class="dropdown-header">SHOP BY SALE</li>
<li>Women's watches on sale
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000
</li>
<li>$2,000 - $5,000
</li>
<li>$5,001 - $8,000
</li>
<li>$8,001 - $12,000
</li>
<li>$12,001 and up
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">POLICIES
<ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
<div class="row">
<div class="col-sm-12">
<ul class="multi-column-dropdown">
<li>Returns and Exchanges
</li>
<li>Payment and Shipping
</li>
<li>Warranty and Repair
</li>
<li>International Ordering
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</ul>
</li>
<li>WATCH TRADE-IN
</li>
<!-- Policies Dropdown -->
<li>PREOWNED
</li>
<li>ADVANCED SEARCH
</li>
</ul>
</div>
Could You try this?
I removed <a href=""> in <li> tags
<div id="main_navbar">
<ul class="nav navbar-nav">
<!-- Brands Dropdown -->
<li class="dropdown">
BRANDS
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">A</li>
<li><a title="A. Lange & Sohne" href="/brand/a-lange-sohne.html">A. Lange & Sohne</a></li>
<li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a></li>
<li class="dropdown-header">B</li>
<li><a title="Baume & Mercier" href="/brand/baume-mercier.html">Baume & Mercier</a></li>
<li><a title="Bedat" href="/items.php?brand=74">Bedat</a></li>
<li><a title="Bell & Ross" href="/brand/bellross.html">Bell & Ross</a></li>
<li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a></li>
<li><a title="Breguet" href="/brand/breguet.html">Breguet</a></li>
<li><a title="Breitling" href="/brand/breitling.html">Breitling</a></li>
<li><a title="Bremont" href="/items.php?brand=115">Bremont</a></li>
<li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a></li>
<li class="dropdown-header">C</li>
<li><a title="Cartier" href="/brand/cartier.html">Cartier</a></li>
<li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a></li>
<li><a title="Chopard" href="/brand/chopard.html">Chopard</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">E</li>
<li><a title="Ebel" href="/brand/ebel.html">Ebel</a></li>
<li class="dropdown-header">G</li>
<li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a></li>
<li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a></li>
<li class="dropdown-header">H</li>
<li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a></li>
<li><a title="Hermes" href="/brand/hermes.html">Hermes</a></li>
<li><a title="Hublot" href="/brand/hublot.html">Hublot</a></li>
<li class="dropdown-header">I</li>
<li><a title="IWC" href="/brand/iwc.html">IWC</a></li>
<li class="dropdown-header">J</li>
<li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a></li>
<li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">L</li>
<li><a title="Longines" href="/brand/longines.html">Longines</a></li>
<li class="dropdown-header">M</li>
<li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a></li>
<li><a title="Michele" href="/brand/michele.html">Michele</a></li>
<li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a></li>
<li class="dropdown-header">O</li>
<li><a title="Omega" href="/brand/omega.html">Omega</a></li>
<li><a title="Orbita Watch Winders & Cases" href="/brand/orbita-winders.html">Orbita Watch Winders & Cases</a></li>
<li><a title="Oris" href="/brand/oris.html">Oris</a></li>
<li class="dropdown-header">P</li>
<li><a title="Panerai" href="/items.php?brand=85">Panerai</a></li>
<li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a></li>
<li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a></li>
<li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a></li>
<li><a title="Piaget" href="/items.php?brand=69">Piaget</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">R</li>
<li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a></li>
<li><a title="Rolex" href="/brand/rolex.html">Rolex</a></li>
<li class="dropdown-header">T</li>
<li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a></li>
<li class="dropdown-header">U</li>
<li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a></li>
<li class="dropdown-header">V</li>
<li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a></li>
<li class="dropdown-header">Z</li>
<li><a title="Zenith" href="/brand/zenith.html">Zenith</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Mens Watches Dropdown -->
<li class="dropdown">
<a>MEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All men's watches</li>
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000</li>
<li>$2,000 - $5,000</li>
<li>$5,001 - $8,000</li>
<li>$8,001 - $12,000</li>
<li>$12,001 and up</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP MEN'S SALE</li>
<li>All men's sale</li>
<li class="dropdown-header">SHOP SALE BY PRICE</li>
<li>under $2,000</li>
<li>$2,000 - $5,000</li>
<li>$5,001 - $8,000</li>
<li>$8,001 - $12,000</li>
<li>$12,001 and up</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY MOVEMENT</li>
<li>Quartz</li>
<li>Automatic</li>
<li>Manual Wind</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Ladies Watches Dropdown -->
<li class="dropdown">
<a>WOMEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All women's watches</li>
<li class="dropdown-header">SHOP BY SALE</li>
<li>Women's watches on sale</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000</li>
<li>$2,000 - $5,000</li>
<li>$5,001 - $8,000</li>
<li>$8,001 - $12,000</li>
<li>$12,001 and up</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
<a>POLICIES</a>
<ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
<div class="row">
<div class="col-sm-12">
<ul class="multi-column-dropdown">
<li>Returns and Exchanges</li>
<li>Payment and Shipping</li>
<li>Warranty and Repair</li>
<li>International Ordering</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</ul>
</li>
<li>WATCH TRADE-IN</li>
<!-- Policies Dropdown -->
<li>PREOWNED</li>
<li>ADVANCED SEARCH</li>
</ul>
I am in the process of trying to style this navigation bar to this image:
Currently I have this:
https://jsfiddle.net/jd3tgzme/1/
<!-- Custom CSS -->
<style>
.alphabetNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
background-color: #cecece;
padding: 3px;
margin: 2px;
}
.noNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
color: #FFFFFF;
background-color: #000000;
padding: 3px;
margin: 2px;
}
.letter:hover {
color: red;
}
.letter:visited {
background-color: red;
}
.submenuDiv ul {
display: inline;
}
.submenuDiv ul li {
float: left;
list-style: none;
padding: 5px;
margin: 10px;
background-color: #cecece;
border: solid 1px black;
border-radius: 10px;
font-size: 12px;
}
.submenuDiv {
display: none;
}
</style>
<!-- JS -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>
$(document).ready(function() {
$(".letter").click(function(e) {
var letter = $(this).html().trim();
$(".submenuDiv").hide();
x = e.clientX - 100;
pos = $(this).position();
y = pos.top + 50;
$("#div" + letter).css({
left: x,
top: y,
position: 'absolute'
});
$("#div" + letter).show();
});
});
</script>
</head>
<body>
<ul class='alphabetNav'>
<li><a class='letter' id='letterA'>A</a>
</li>
<li><a class='letter' id='letterB'>B</a>
</li>
<li><a class='letter' id='letterC'>C</a>
</li>
<ul class='noNav'>
<li>D</li>
</ul>
<li><a class='letter' id='letterE'>E</a>
</li>
<ul class='noNav'>
<li>F</li>
</ul>
<li><a class='letter' id='letterG'>G</a>
</li>
<li><a class='letter' id='letterH'>H</a>
</li>
<ul class='noNav'>
<li>I</li>
</ul>
<ul class='noNav'>
<li>J</li>
</ul>
<li><a class='letter' id='letterK'>K</a>
</li>
<li><a class='letter' id='letterL'>L</a>
</li>
<li><a class='letter' id='letterM'>M</a>
</li>
<ul class='noNav'>
<li>N</li>
</ul>
<li><a class='letter' id='letterO'>O</a>
</li>
<li><a class='letter' id='letterP'>P</a>
</li>
<li><a class='letter' id='letterQ'>Q</a>
</li>
<li><a class='letter' id='letterR'>R</a>
</li>
<li><a class='letter' id='letterS'>S</a>
</li>
<li><a class='letter' id='letterT'>T</a>
</li>
<ul class='noNav'>
<li>U</li>
</ul>
<li><a class='letter' id='letterV'>V</a>
</li>
<li><a class='letter' id='letterW'>W</a>
</li>
<li><a class='letter' id='letterX'>X</a>
</li>
<li><a class='letter' id='letterY'>Y</a>
</li>
<li><a class='letter' id='letterY'>Z</a>
</li>
</ul>
<!-- Submenu for letter A -->
<div class='submenuDiv' id='divA'>
<ul>
<li>
Abbotsford-Mission (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter B -->
<div class='submenuDiv' id='divB'>
<ul>
<li>
Barrie (Ont.)
</li>
<li>
Brantford (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter C -->
<div class='submenuDiv' id='divC'>
<ul>
<li>
Calgary (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter D -->
<div class='submenuDiv' id='divD'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter E -->
<div class='submenuDiv' id='divE'>
<ul>
<li>
Edmonton (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter F -->
<div class='submenuDiv' id='divF'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter G -->
<div class='submenuDiv' id='divG'>
<ul>
<li>
Greater Sudbury (Ont.)
</li>
<li>
Guelph (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter H -->
<div class='submenuDiv' id='divH'>
<ul>
<li>
Halifax (N.S.)
</li>
<li>
Hamilton (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter I -->
<div class='submenuDiv' id='divI'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter J -->
<div class='submenuDiv' id='divJ'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter K -->
<div class='submenuDiv' id='divK'>
<ul>
<li>
Kelowna (B.C.)
</li>
<li>
Kingston (Ont.)
</li>
<li>
Kitchener-Cambridge-Waterloo (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter L -->
<div class='submenuDiv' id='divL'>
<ul>
<li>
London (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter M -->
<div class='submenuDiv' id='divM'>
<ul>
<li>
Moncton (N.B.)
</li>
<li>
Montréal (Que.)
</li>
</ul>
</div>
<!-- Submenu for letter N -->
<div class='submenuDiv' id='divN'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter O -->
<div class='submenuDiv' id='divO'>
<ul>
<li>
Oshawa (Ont.)
</li>
<li>
Ottawa-Gatineau (Ont.-Que.)
</li>
</ul>
</div>
<!-- Submenu for letter P -->
<div class='submenuDiv' id='divP'>
<ul>
<li>
Peterborough (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter Q -->
<div class='submenuDiv' id='divQ'>
<ul>
<li>
Québec (Que.)
</li>
</ul>
</div>
<!-- Submenu for letter R -->
<div class='submenuDiv' id='divR'>
<ul>
<li>
Regina (Sask.)
</li>
</ul>
</div>
<!-- Submenu for letter S -->
<div class='submenuDiv' id='divS'>
<ul>
<li>
Saguenay (Que.)
</li>
<li>
Saint John (N.B.)
</li>
<li>
Saskatoon (Sask.)
</li>
<li>
Sherbrooke (Que.)
</li>
<li>
St. Catharines-Niagara (Ont.)
</li>
<li>
St. John's (N.L.)
</li>
</ul>
</div>
<!-- Submenu for letter T -->
<div class='submenuDiv' id='divT'>
<ul>
<li>
Thunder Bay (Ont.)
</li>
<li>
Toronto (Ont.)
</li>
<li>
Trois-Rivières (Que.)
</li>
</ul>
</div>
<!-- Submenu for letter U -->
<div class='submenuDiv' id='divU'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter V -->
<div class='submenuDiv' id='divV'>
<ul>
<li>
Vancouver (B.C.)
</li>
<li>
Victoria (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter W -->
<div class='submenuDiv' id='divW'>
<ul>
<li>
Windsor (Ont.)
</li>
<li>
Winnipeg (Man.)
</li>
</ul>
</div>
</body>
I was just wondering how I can style it so that 'D, F, I, J, N, U, X, Y, & Z' can be greyed out and unclickable. I was also just wondering how to get the grey background and when a letter it clicked, the background fills with white (like the M in the image). Any and all help is greatly appreciated!
Thank you!
Add this to your CSS
.noNav{
color:#aaa;
}
https://jsfiddle.net/jd3tgzme/2/
For the active LI: https://jsfiddle.net/jd3tgzme/3/
add in CSS:
.alphabetNav li.active{
background-color:#fafafa;
}
and in jQuery:
e.preventDefault();
$(".letter").closest("li").removeClass("active");
$(this).closest("li").addClass("active");
1- To make unclickable letters greyed out, you can use this CSS:
.noNav li {
cursor:default;
color:#ccc
}
2- To add a gray background to your navigation, you will need to set a height for your alphabetNav and a background like this:
.alphabetNav {
width:550px;
height:27px
}
3- To modify the style of the clicked element, you will need to add something like this in your click function:
$(".letter").parent().removeClass('current');
$(this).parent().addClass('current');
4- To style the clicked element, you will need to add something like this in your css:
li.current {
background:#fff
}
5- To add rounded corner, you will need to use border-radiusin your css like this:
.alphabetNav li {
border-top-left-radius:5px;
border-top-right-radius:5px;
}
You can see your updated fiddle
https://jsfiddle.net/jd3tgzme/9/
.noNav {
background-color: #aaa;
}
.active {
background-color: white!important;
}
$("#letter"+letter).parent().addClass('clicked')
Here I do the following:
I changed the colour of .noNav class to grey
I added a class called .active that turns the parent element background (Li) white, you can change the colour to match your selected background (in this case white) of the content wrapper below the navbar, and voila it blends in.
I added border radius to the top corners of the li's of .alphabetNav to round the edges
Whats up to you:
Remove .active from previously clicked letter when a new one is clicked. Should be simple.
P.S: The "!important" after 'white' basically means that the browser should ignore any other setting that applies to the same object. (overriding)
Cheers!