All of the submenus appear and overlap regardless of which of the three options is selected [Work, Services, Contact] and all are highlighted rather than the one the mouse is hovering over
Is there a way to only display the sub menu that has been selected using CSS and hiding the rest until otherwise clicked?
Can you use an example of how I would do this using the code provided:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('#menu-wrapper').rb_menu({
triggerEvent: 'click',
hideOnLoad: true,
loadHideDelay: 0,
autoHide: false,
transition: 'swing'
});
});
</script>
<div id="menu-wrapper">
<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>
</div>
CSS
#menu {
position: relative;
top: 435px;
left: -15px;
width: 60px;
height: 25px;
}
#menu2 {
position: relative;
top: 445px;
left: -15px;
width: 60px;
}
#services {
position: relative;
top: 428px;
left: -15px;
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;
}
It looks like your css styles are being overridden somewhere in your page. I have setup a sample page for you to try - this works for me.
Include the following code in the head of your document:
<link rel="stylesheet" type="text/css" href="http://www.getintothis.com/pub/projects/rb_menu/css/rb_menu.css" media="screen,projection" />
<style type="text/css">
#menu-wrapper {
border: 1px solid #bcd;
background: #fbfbfb;
padding: 12px;
overflow: hidden;
width: 540px;
height: 320px;
position: relative;
}
.menu {
margin-bottom: 10px;
}
.toggle {
padding: 6px;
margin-bottom: 2px;
font-size: 12pt !important;
}
.items {
margin-left: 46px;
}
.items li a {
padding: 2px;
}
</style>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery.ui-1.7.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/rb_menu.js"></script>
<script>
$(document).ready(function(){
$('#menu1').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
$('#menu3').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
});</script>
Then add the following in the body:
<div id="menu-wrapper">
<div id="menu1" class="menu clearfix">
<div class="toggle">Work»</div>
<div class="items" style="display: none; ">
<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" style="display: none; ">
<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="menu3" class="menu clearfix">
<div class="toggle">Services»</div>
<div class="items" style="display: none; ">
<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><!--End menu3--></div><!--End menu-wrapper-->
I hope this helps! :)
Related
I'm trying to get the following to work:
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</div>
</ul>
</div>
<script>
$(document).ready(function() {
$("#sortable-basic").kendoSortable({
hint:function(element) {
return element.clone().addClass("hint");
},
placeholder:function(element) {
return element.clone().addClass("placeholder").text("drop here");
},
cursorOffset: {
top: -10,
left: -230
},
items: ".sortable, .sortable-div"
});
});
</script>
So the plan is the following:
You need to be able to drag the div's up and down other div's. This works fine. But you also need to be able to drag a single item around, in and out the div. This is the part I cannot figure out. When I click an item it selects the div anyways.
For the life of me i cannot seem to figure this out.
please try below code.
For your more reference, I was modify given link code:
https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables
$(document).ready(function() {
function placeholder(element) {
return $("<li style='color: red;' class='sortable' id='placeholder'>Drop Here!</li>");
}
$("#sortable-basic").kendoSortable({
connectWith: ".sortable-div",
filter: ".sortable", // Filter only list items that are direct child of the Sortable container.
// Use ".list-item" to allow parent items to use the nested Sortable.
placeholder: placeholder
});
$(".sortable-div").kendoSortable({
connectWith: "#sortable-basic",
filter: ".sortable",
placeholder: placeholder
});
});
#example {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist {
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title span {
display: none;
}
#sortable-basic {
padding: 0;
margin: 0;
}
li.sortable {
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
li.sortable:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span {
display: block;
float: right;
color: #666;
}
li.sortable:hover {
background-color: #dceffd;
}
li.hint {
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="example">
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</ul>
</ul>
</div>
</div>
I have an anchor tag with a hamburger style css that toggles a fly-out menu. The thing I am stuck at is that I always want it to stay on top however at present the flyout menu goes over the anchor hamburger and hides it. The flyout menu has the class called nav-container any help is welcome here as I have tried to solve this for a few hours. Thanks in advance.
HTML -
<div class="container">
<nav id="main-nav" class="hc-nav hc-nav-1">
<ul>
<li class="Test page">
Test page
<ul>
<li class="nav-has-sub">
Sub test page
<ul>
<li>
Sub sub test page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<a class="toggle">
<span></span>
</a>
</div>
Flyout HTML -
<div class="nav-container" style="">
<div class="nav-wrapper nav-wrapper-0">
<div class="nav-content">
<ul>
<li class="nav-close"><span></span></li>
<li><a class="toggle toggle-open hc-nav-trigger hc-nav-1 nav-item" style="top:-25px;left:10px">
<span></span>
</a>
</li>
</ul>
<ul>
<li class="Test page nav-parent">
<input type="checkbox" id="hc-nav-1-1-0" data-level="1" data-index="0" value="n83m4ogohw-gjximxnm4rq">Test page<span class="nav-next"><label for="hc-nav-1-1-0"></label></span>
<div class="nav-wrapper nav-wrapper-1">
<div class="nav-content">
<h2>Test page</h2>
<ul style="text-indent: 40px;">
<li class="nav-has-sub nav-parent">
<input type="checkbox" id="hc-nav-1-2-0" data-level="2" data-index="0" value="vjoqryeoc9-trdi4kvf59">level 2.1<span class="nav-next"><label for="hc-nav-1-2-0"></label></span>
<div class="nav-wrapper nav-wrapper-2">
<div class="nav-content">
<h2>level 2.1</h2>
<ul style="text-indent: 80px;">
<li>level 3</li>
</ul>
</div>
</div>
</li>
<li>level 2.2</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li class="Another top level">Another top level</li>
</ul>
</div>
</div>
</div>
CSS
.toggle
{
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 35px;
min-height: 24px;
width: auto;
left: auto;
float: left;
display: block;
cursor: pointer;
box-sizing: content-box;
font-size: 20px;
padding-left: 55px;
line-height: 24px;
margin-top: 0
}
.nav-container {
position: fixed;
z-index: 9998;
top: 0;
width: 350px;
height: auto;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
transition: transform .4s ease;
padding-bottom: 450px;
}
It was a very simple case of giving the class .nav-container a z-index:0
Thanks everyone for posting.
I trying to apply Tab concept to my web page.e.g for tab names are Monday...Tue.. upto sunday. each tab are contains one image file based on the days (size 460*620).when i run my page it shows all images, what i need is as per the tab image will be display. but here shows all images.
HTML:
<!--tab code-->
<div class="tabs" style="margin-top:100px;">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1"> <img src="order/Order/image/daily_buffet/40820-sunday.png"/></div>
<div id="item2"> <img src="order/Order/image/daily_buffet/50557-tuesday.png"/></div>
<div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
</div>
</div>
<!--end of tab code-->
CSS:
<!--tab code-->
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
<!--end of tab code-->
Try this, its working for me. Have you included Jquery into your project? check that once or update the hosted URL.
html
<!--tab code-->
<div class="tabs" style="margin-top:100px;">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/></div>
<div id="item2"> <img src="http://sites_jupiterbase2.jumbowp.com/wp-content/uploads/2014/08/thumbnail-placeholder-Copy.jpg"/></div>
<div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
</div>
</div>
<!--end of tab code-->
https://jsfiddle.net/hpx0ymcL/1/
I designed jQuery tree view using this web page. I changed this code little bit more.I removed the content of ' div class="tree" ' and add its content as follows.
<div class="tree">
<ul id="list">
<div id="1">
<li id="li_1"><a>2015/01/01 08:00:00</a>
<ul id="ul_1">
<div id="1_1"><li id="start"><a>2015/01/01 08:10:05 </a></li></div>
<div id="1_2"><li id="T"><a>2015/01/01 08:15:10</a></li></div>
<div id="1_3"><li id="start"><a>2015/01/01 08:27:15</a></li></div>
<div id="1_4"><li id="F"><a>2015/01/01 08:39:20</a></li></div>
<div id="1_5"><li id="start"><a>2015/01/01 08:46:25</a></li></div>
<div id="1_6"><li id="F"><a>2015/01/01 08:55:30</a></li></div>
</ul>
</li>
</div>
<div id="2">
<li id="li_2"><a>2015/01/01 10:20:00 </a>
<ul id="ul_2">
<div id="2_1"><li id="start"><a>2015/01/01 10:28:09</a></li></div>
<div id="2_2"><li id="F"><a>2015/01/01 10:37:20</a></li></div>
<div id="2_3"><li id="start"><a>2015/01/01 10:45:13</a></li></div>
<div id="2_4"><li id="F"><a>2015/01/01 10:48:26</a></li></div>
<div id="2_5"><li id="start"><a>2015/01/01 10:57:54</a></li></div>
<div id="2_6"><li id="T"><a>2015/01/01 11:12:00</a></li></div>
<div id="2_7"><li id="start"><a>2015/01/01 11:20:09</a></li></div>
<div id="2_8"><li id="F"><a>2015/01/01 11:28:12</a></li></div>
</ul>
</li>
</div>
</ul>
</div>
Tree view is worked successfully. But the expand/collapse icon(plus_minus icon) is not shown.Where am I wrong? Thanks for advices.
css looks for anchor under li of that ul but you inserted div there.that's why its not showing icon
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none
icon's class>>
.tree li.parent > a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
Finally I found the solution.(Nishith Chaturvedi's advice is helpfull for me to build this answer.) First I changed the changing code little bit more again as follows.. :)
.tree > .listClass > .testSuite > .testSuite_branch >a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree > .listClass > .testSuite > .testSuite_branch >a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
<div class="tree">
<ul id="list" class="listClass">
<div tabindex="-1" id="1" class="testSuite">
<li id="li_1" class="testSuite_branch"><a>2015/01/01 08:00:00 </a>
<ul id="ul_1">
<div id="1_1"><li id="start"><a>2015/01/01 08:10:05</a></li></div>
<div id="1_2"><li id="T"><a>2015/01/01 08:15:10</a></li></div>
<div id="1_3"><li id="start"><a>2015/01/01 08:27:1</a></li></div>
<div id="1_4"><li id="F"><a>2015/01/01 08:39:2</a></li></div>
<div id="1_5"><li id="start"><a>2015/01/01 08:46:25</a></li></div>
<div id="1_6"><li id="F"><a>2015/01/01 08:55:30</a></li></div>
</ul>
</li>
</div>
</ul>
</div>
I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project.
Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app.
So, here is the code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<section id="demos">
<h1>Demos</h1>
<style>
#demos section {
overflow: hidden;
}
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
.handle {
cursor: move;
}
.sortable.connected {
width: 200px;
min-height: 100px;
float: left;
}
li.disabled {
opacity: 0.5;
}
li.highlight {
background: #FEE25F;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<section>
<h1>Sortable List</h1>
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1
<li draggable="true" class style="display: list-item;">Item 2
<li draggable="true">Item 3
<li draggable="true">Item 4
<li draggable="true">Item 5
<li draggable="true">Item 6
</ul>
</section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
<script src="/html5sortable/jquery.sortable.js"></script>
<script>
$(function() {
$('#sortable1, #sortable2').sortable();
$('#sortable3').sortable({
items: ':not(.disabled)'
});
$('#sortable-with-handles').sortable({
handle: '.handle'
});
$('#sortable4, #sortable5').sortable({
connectWith: '.connected'
});
});
</script>
</BODY>
</HTML>
But even this is not working. The examples given on the site are working properly, so there has to be something wrong.
I have properly downloaded and included all the files that need to be downloaded/included?
There is an additional "/" in the relative address that you have defined. Remove it.
I think you need to close your li tags like this:
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1</li>
<li draggable="true" class style="display: list-item;">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
<li draggable="true">Item 6</li>
</ul>
fiddle