I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed
I have had good experiences with the Kendo UI menu by Telerik.
searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu
I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.
use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx
A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO
Related
I am trying to show the .right-text1 element (which is inside .right-container div) when the mouse hovers over .project1 element (which is inside .left-container div). However, I am unable to code it with CSS since selectors work only inside the current parent div.
I have the following code:
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
}
/* This is where I try to show RIGHT-TEXT1 upon hovering on PROJECT1 div,
but the selector does not work due to trying to access .right-text1 but it is outside the current DIV */
.project1:hover~.right-text1 {
display: none;
}
<div class="left-container">
<ul>
<div class="project1">
<li>Project 1</li>
</div>
<div class="project2">
<li>Project 2</li>
</div>
<div class="project3">
<li>Project 3</li>
</div>
<div class="project4">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;">
Information about Project 4
</div>
</div>
It is imperative to keep the format, where the two containers reside next to each other and 25% and 74% width stays.
It might be super easy, but I am learning CSS for a week now and this stumbled me.
Any help would be greatly appreciated.
As explaned in the comments, you'll need JS for that.
Here a sample that adds a class on mouse enter, and remove it on mouse leave, mimicking the hover effect.
document.querySelectorAll('[data-project]').forEach(project => {
const name = project.dataset.project
const infoElement = document.querySelector(`[data-project-info="${name}"]`)
// Mouse enter
project.addEventListener('mouseenter', () => {
infoElement.classList.add('is-hovered')
})
// Mouse leave
project.addEventListener('mouseleave', () => {
infoElement.classList.remove('is-hovered')
})
})
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
display: none;
}
.right-text1.is-hovered,
.right-text2.is-hovered,
.right-text3.is-hovered,
.right-text4.is-hovered {
display: block;
}
<div class="left-container">
<ul>
<div class="project1" data-project="1">
<li>Project 1</li>
</div>
<div class="project2" data-project="2">
<li>Project 2</li>
</div>
<div class="project3" data-project="3">
<li>Project 3</li>
</div>
<div class="project4" data-project="this-text-matches-here">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;" data-project-info="1">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;" data-project-info="2">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;" data-project-info="3">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;" data-project-info="this-text-matches-here">
Information about Project 4
</div>
</div>
In my web app I have a vertical CSS menu, to show it. My code works as expected, with one issue, when I mouse out on all a.menutoggle elements the last dropdown remains open.
I am not getting a clue on how to hide that? Please help!
$('.menutoggle').mouseover(function(event) {
$('.menucontainer').hide();
$(this).next('.menucontainer').toggle();
});
$('#menutoggle').mouseout(function() {
$('.menucontainer').hide();
});
#menuwrap {
padding: 50px;
}
.menutoggle {
display: block;
z-index: 99;
border: 1px solid red;
}
.menucontainer {
display: none;
position: absolute;
left: 150px;
top: 50px;
z-index: 999;
border: 1px solid blue;
background: #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="menuwrap">
Menu Toggle
<ul class="menucontainer">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Four</li>
<li>Five</li>
<li>Siz</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
I've created a fiddle here: https://jsfiddle.net/rz3g78h1/1/
The primary issue is because your #menutoggle selector on the mouseout event needs to use a class selector, not an id. Change it to .menutoggle.
However this raises another issue where the menu rapidly flickers as the mouse moves between the elements due to the use of mouseout. To fix this you can amend the logic to use CSS alone to show/hide the submenus, like this:
#menuwrap {
padding: 50px;
}
.menutoggle {
display: block;
z-index: 99;
border: 1px solid red;
}
.menucontainer {
display: none;
}
.menutoggle:hover + .menucontainer,
.menutoggle + .menucontainer:hover {
display: block;
position: absolute;
left: 150px;
top: 50px;
z-index: 999;
border: 1px solid blue;
background: #999;
}
<div id="menuwrap">
Menu Toggle
<ul class="menucontainer">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Four</li>
<li>Five</li>
<li>Siz</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
I have a requirement to create below component by CSS or Javascript.
I will receive an array like [{'label':'status1'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].
And it also support support the highlight red like below.
In this case, it will receive an array like [{'label':'status1', 'priority': 'high'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].
It also support the click and hover event like below.
Actually I mainly does not understand how to implement the shape like below small one.
Here, The solution only for shape and hover effects.
Fiddle
<ul class="status">
<li><span>#</span>Status 1</li>
<li><span>#</span>Status 2</li>
<li><span>#</span>Status 3</li>
<li><span>#</span>Status 4</li>
<li><span>#</span>Status 5</li>
<li><span>#</span>Status 6</li>
</ul>
To create boxes with arraows there are a couple of solutions: SVG, CSS3 or image (the worst). See above comments for CC3 examples.
Using the :hover in CSS , it is possible to make it change color in CSS.
To make it select-able, add a click event listener on each box that changes the component state. Use that state in the render to add or not a class like .selected. Then again in CSS give this class some other colors
Here's another solution for that shape using pseudo element, position and transform.
.container {
font-size: 0;
}
.box {
position: relative;
font-size: 13px;
display: inline-flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 75px;
width: 100px;
border: 3px solid black;
background: white;
}
.box:not(:last-of-type) {
border-right: none;
}
.box:not(:last-of-type):after {
content: '';
background: inherit;
height: 8px;
width: 8px;
position: absolute;
left: 101%;
top: 50%;
z-index: 1;
border-top: 3px solid black;
border-right: 3px solid black;
transform: rotateZ(45deg) translate(-50%);
}
<div class="container">
<div class="box">
<span>#</span>
<span>Status 1</span>
</div>
<div class="box">
<span>#</span>
<span>Status 2</span>
</div>
<div class="box">
<span>#</span>
<span>Status 3</span>
</div>
</div>
I have a web page, 1000px by 1000px for the main div. Inside the main div, at the top, there is a horizontal bar with four sections, each taking up 1/4 of the space. Each section has some text [wrapped in h2 tag], horizontally/vertically centered in the middle of the 1/4 section and each section must generate a drop-down menu.
For the drop down menu [which must work both on mobile and desktop], I borrowed the idea of using a checkbox [check for make dropdown visible, uncheck for invisible], but it isn't working correctly. The checkbox is small and if it is invisible it is almost impossible to know where to click to check/uncheck. I want the drop down menu to appear if the user clicks/taps ANYWHERE in the 1/4 section area.
The horizontal row of 1/4 section drop down menus looks like this:
^ Note that they don't actually work.
HTML Code:
<div id="Media_Choices">
<div id="Video" class="media_choice"> <h2>Video▼</h2> </div>
<div id="Pictures" class="media_choice"> <h2>Pictures▼</h2> </div>
<div id="Audio" class="media_choice"> <h2>Audio▼</h2> </div>
<div id="Stories" class="media_choice"> <h2>Stories▼</h2> </div>
</div>
CSS:
#Media_Choices {
width: 100%;
max-height:40px;
min-height:40px;
}
.media_choice {
display: inline;
float: left;
width: 24.5%;
max-height: 38px;
min-height: 38px;
text-align: center;
vertical-align: middle;
line-height: 38px; /* the same as your div height */
}
#Video {
}
#Pictures {
}
#Audio {
}
#Stories {
}
Extra credit if you can get the ▼ downward facing arrow to turn into a ▲ whenever the drop down menu is down and then revert back into a ▼ downward facing arrow whenever the menu is up. You don't need to use the check-box based technique [I know there is a hover option], but anything that works cross platform is good.
For reference, check boxes were origionally implemented using the following code [taken from another question], but copy-pasting in this solution and changing the text inside the box isn't good enough:
<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
<label for="dropdownbox1">Open dropdown</label>
<ul class="dropdown">
<li>...</li><li>etc</li>
</ul>
</div>
with CSS:
.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}
If i understand you correctly you want to create a responsive dropdown menu and you want the arrows to change when the menu appear/disappear, if this is the case a one way to do it would be to attach event listeners to the menu items that would show/hide the submenus on click, using css and javascript you can do the following:
.media_choice > h2:after {
display: inline-block;
content: '▼';
}
.media_choice.dropped > h2:after {
content: '▲';
}
.media_choice > ul {
display: none;
}
.media_choice.dropped > ul {
display: block;
}
And with javascript add the event listeners:
$(document).ready (function()
{
$('.media_choice').on ('click', function()
{
$(this).toggleClass ('dropped');
});
});
JSFiddle
Here it is using checkboxes and no JS.
nav {
width: 80%;
margin: 20px auto;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: none;
/* to contain the floats */
}
nav li {
padding: 0;
margin: 0;
width: 25%;
float: left;
position: relative;
white-space: nowrap;
}
nav input {
display: none;
}
nav label {
display: block;
border: 1px solid black;
padding: 10px;
cursor: pointer;
}
nav label:hover {
background: #ccc;
}
nav a {
display: block;
padding: 10px;
}
nav a:hover {
background: #ccc;
}
nav label:after {
content: '▼';
font-size: 10px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
border: 1px solid red;
box-sizing: border-box;
background: #fff;
width: 100%;
}
nav ul ul li {
width: 100%;
float: none;
}
nav input:checked ~ ul {
display: block;
}
nav input:checked ~ label:after {
content: '▲';
}
<!-- http://codepen.io/allicarn/pen/gPPmZZ -->
<nav>
<ul>
<li>
<input type="checkbox" id="navitem1" name="navinputs" />
<label for="navitem1">Menu Item #1</label>
<ul>
<li>Sub Menu Item #1a</li>
<li>Sub Menu Item #1b</li>
<li>Sub Menu Item #1c</li>
<li>Sub Menu Item #1d</li>
</ul>
</li>
<li>
<input type="checkbox" id="navitem2" name="navinputs" />
<label for="navitem2">Menu Item #2</label>
<ul>
<li>Sub Menu Item #2a</li>
<li>Sub Menu Item #2b</li>
<li>Sub Menu Item #2c</li>
<li>Sub Menu Item #2d</li>
</ul>
</li>
<li>
<input type="checkbox" id="navitem3" name="navinputs" />
<label for="navitem3">Menu Item #3</label>
<ul>
<li>Sub Menu Item #3a</li>
<li>Sub Menu Item #3b</li>
<li>Sub Menu Item #3c</li>
<li>Sub Menu Item #3d</li>
</ul>
</li>
<li>
<input type="checkbox" id="navitem4" name="navinputs" />
<label for="navitem4">Menu Item #4</label>
<ul>
<li>Sub Menu Item #4a</li>
<li>Sub Menu Item #4b</li>
<li>Sub Menu Item #4c</li>
<li>Sub Menu Item #4d</li>
</ul>
</li>
</ul>
</nav>
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>