I'm creating a navigation structure using ul container which has some li items and that li element has a <a> element with the toggle class. Underneath <a> element also there is ul container with the class name inner. What I'm doing is when i click on any <a> element a click event is call. In that event i calculate height of all children that inner class has but when i want to set that calculated height as a css property to that inner class it doesn't expand fully.
See Code:
function CallBackFunction() {
var elm = $(this);
var height = 0;
elm.next().children().each(function () {
height = height + $(this).outerHeight(true);
});
elm.next().css('max-height', height);
}
$('.toggle').click(CallBackFunction);
.parent {
border: 1px solid black;
}
.inner {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<ul class="parent">
<li>
<a class="toggle">Link 1</a>
<ul class="inner">
<li>
<p>Dummy Text</p>
</li>
<li>
<a class="toggle">Nested Link</a>
<div class="inner">
<p>Again Dummy Text</p>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
Add this code in css
ul.inner>li {
float: left;
width: 100%;
}
Here li is not getting height of p,so need to float li
function CallBackFunction() {
var elm = $(this);
var height = 0;
elm.next().children().each(function () {
height = height + $(this).outerHeight(true);
});
elm.next().css('max-height', height);
}
$('.toggle').click(CallBackFunction);
.parent {
border: 1px solid black;
}
.inner {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
ul.inner>li {
float: left;
width: 100%;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="parent">
<li>
<a class="toggle">Link 1</a>
<ul class="inner">
<li>
<p>Dummy Text</p>
</li>
<li>
<a class="toggle">Nested Link</a>
<div class="inner">
<p>Again Dummy Text</p>
</div>
</li>
</ul>
</li>
</ul>
Related
I got a codepen where you have to select some tabs, then you can insert your name and press submit and your name gets appended to the selected tabs. The thing is when you select multiple tabs (i did that with the jQuery selectable widget) and add your name to them, your name gets displayed multiple times. Thats pretty obvious because it gets added to every tab and that should be like that.
My goal is that javascript just hides the "duplicated" list items. So your name is just there once, but still on each tab you selected.
Thats my js:
$(function() {
$('#plannername').prop('disabled', true);
$('#plannername').attr("placeholder", "zuerst Tage auswählen");
$('#plannersubmit').attr("value", " ");
function selectionChange(event, ui) {
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
$('#plannername').prop('disabled', false);
$('#plannername').attr("placeholder", "Name eingeben");
$('#plannersubmit').attr("value", "eintragen");
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
And these are my HTML tabs:
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>
If you need to see my whole code, you can check out my codepen, which I mentioned above.
Looks like 2 events will make tabs show content - selecting a tab, then selecting a tab and submitting the form. On both of those events, I would loop through the visible tabs, and hide any duplicates.
Created a function called clearDupes() that will hide duplicates, and calling it in selectionChange() and on $('#plannerform').submit()
Here's a pen since the form won't submit on SO http://codepen.io/mcoker/pen/YNoVOo
$(function() {
function clearDupes() {
var arr = [];
$('.plannerlist li').removeClass('hidden');
$('.tabcontent:visible').each(function() {
$(this).find('.plannerlist li').each(function() {
var nameText = $(this).text();
if (arr.indexOf(nameText) > -1) {
$(this).addClass('hidden');
} else {
arr.push(nameText);
}
})
})
}
// define one function, to be used for both select/unselect
$('#plannername').prop('disabled', true);
$('#plannername').attr("placeholder", "zuerst Tage auswählen");
$('#plannersubmit').attr("value", " ");
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function() {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function() {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
$('#plannername').prop('disabled', false);
$('#plannername').attr("placeholder", "Name eingeben");
$('#plannersubmit').attr("value", "eintragen");
clearDupes();
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
$('#plannerform').submit(function(e) {
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
clearDupes();
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
margin-top:3px;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
.ui-selectable-helper {
visibility: hidden;
}
#content{
width:60%;
background-color:#9eefbc;
margin-left:20%;
padding-top:70px;
margin-top:3px;
padding-bottom:30px;
}
.tabcontent{
top:44px;
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
font-size:2em;
display:none;
text-align:center;
}
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannername:focus{
outline:0;
}
#plannersubmit{
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#plannersubmit:hover{
transition:.2s ease-in-out;
padding-left:40px;
cursor:pointer;
}
#plannersubmit:focus{
outline:0;
}
#plannersubmit:active{
color:white;
}
.plannerlist{
list-style-type:none;
}
.hidden {
display: none;
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
<input id="plannername" placeholder="Name eingeben" type="text" autocomplete="off"></input><!--
--><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>
Try adding this function to your code:
function isUnique(name) {
var is_unique = true;
$('ul li').each(function(item, index) {
if ($( this ).text() === name) {
is_unique = false;
}
});
return is_unique;
}
We compare the text of every list item with the current name we're attempting to append to the visible list.
You could use the function like this:
var val = $(this).find('#plannername').val();
if (isUnique(val)) {
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
$('#plannername').val('');
}
...
Forked demo
I need to have a hierarchical, collapsible list that has 3 columns. I have the first two parts working, but I can't seem to get the CSS quite right for the third. The picture shows the current code:
(The slightly duplicated text to the left of col3 is a visual error with the fiddle.)
The goal is to have a three col pseudo-table within a collapsible list such that col1 has the standard list indenting, and col2 is centered for all levels and col3 is at the right for all levels. It should look like this:
I tried to accomplish this by having them both float right and then adding a margin/padding to either col2 or col3 so as to move col2 towards the middle where I want it to be. However, somehow col2 ends up on the outside of col3. Seems impossible to me, but with CSS no bug is impossible.
I have tried various other combinations of margins and paddings and float: lefts without luck.
Here's an almost working fiddle.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div id="listContainer">
<div class="listControl">
<a id="expandList"><button>Expand All</button></a>
<a id="collapseList"><button>Collapse All</button></a>
</div>
<ul id="expList">
<li>
<div class="col1">Non-parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Grandparent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
/********************/
/* EXPANDABLE LIST */
/********************/
#listContainer {
margin-top: 15px;
}
#expList ul,
#expList li {
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#expList p {
margin: 0;
display: block;
}
#expList p:hover {
background-color: #121212;
}
#expList li {
line-height: 140%;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/*This works in Firefox following W3C standards, but not in other browsers!*/
/*https://drafts.csswg.org/css-lists/#marker-content*/
/* Collapsed state for list element */
#expList .collapsed {
/* list-style-type: "+";*/
list-style: none;
/*padding: 0px;*/
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
/*list-style-type: "-";*/
list-style: none;
/*padding: 0px;*/
}
/*code that works for non-Firefox*/
#expList .collapsed:before {
content: "+";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList .expanded:before {
content: "-";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList {
clear: both;
}
.col1 {
display: inline;
/*padding-right: 100px;*/
}
.col2 {
display: inline;
float: right;
}
.col3 {
display: inline;
float: right;
}
JS:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Hack to add links inside the cv
$('#expList a').unbind('click').click(function() {
window.location($(this).attr('href'));
return false;
});
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children('ul').show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children('ul').hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready(function() {
prepareList()
});
The solution to this was to realize that float: right apparently also makes the blocks align right, so that they appear in reverse order. With this in mind, one can just switch the order of the blocks to get the normal order back.
E.g.:
<div class="col1">Non-parent</div>
<div class="col4">Col4</div>
<div class="col3">Col3</div>
<div class="col2">Col2</div>
Working fiddle.
so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>
You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>
Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>
You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>
When I hit filter the li get a left overlapping position before to get in transition to filter. I tested the previous questions and answers but isn't solved the problem. The ul doesn't use an absolute position, the li class have left float.
here is the html
<div class="filters">
<ul id="filters" class="clearfix">
<li><a title="all" href="#" class="active"> all </a></li>
<li><a title="web" href="#"> web </a></li>
<li><a title="app" href="#"> app </a></li>
<li><a title="logo" href="#"> logo </a></li>
<li><a title="card" href="#"> card </a></li>
<li><a title="icon" href="#"> icon </a></li>
</ul>
</div>
<div id="portfolio">
<ul id="portfolio_list">
<li class="portfolio" data-id="id-1" data-type="logo">
<div class="portfolio-wrapper">
<img src="images/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
<li class="portfolio" data-id="id-2" data-type="app">
<div class="portfolio-wrapper">
<img src="images/portfolios/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
</ul></div>
And this is the jQuery call
$(document).ready(function () {
var $filter = $('#filters a');
var $portfolio = $('#portfolio_list');
var $data = $portfolio.clone();
$filter.click(function(e) {
if ($($(this)).attr("title") == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
}
$portfolio.quicksand($filteredData, {
adjustHeight: 'dynamic',
duration: 800,
easing: 'easeInOutQuad'
});
$('#filters a').removeClass('active');
$(this).addClass('active');
});
});
forgot to post the css
#portfolio_list li { overflow:hidden; float: left; }
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; }
#portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; }
#portfolio_list .portfolio img { max-width:100%; position: relative; }
#portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; }
#portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; }
#portfolio_list .portfolio .label-text { color:#000; position: relative; z-index:500; padding:12px 8px 0; }
#portfolio_list .portfolio .text-category { display:block; }
Any help is appreciated. Thanks.
The problem was cause by same ID used to style the ul and li and in same time to call it with jQuery. Is needed to use an ID without css styles to not create glitches in quicksand.
i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>