Custom select and option elements - javascript

A picture of what I'm trying to make:
I want to make a custom select + option drop down menu. Is there a way of including content within the option tags, or am I better off making a drop down menu with jQuery and elements:
<div class="dropDown">
<ul>
<li>Option 1 html here</li>
<li>Option 2 html here</li>
<li>Option 3 html here</li>
<li>Option 4 html here</li>
</ul>
</div>

Maybe what you want, this is simple example code:
$(document).ready(function(){
$('.dropDown').click(function(){
$(this).find('ul').slideToggle();
});
$('li').click(function(){
var text = $(this).find('h1').text();
$('#click').text(text);
});
});
li{
cursor:pointer;
background:#000;
display:block;
}
li div{
background-image:url('http://netweaver.com.au/floatHouse/pics/red.gif');
width:50px;
height:50px;
float:left;
}
li h1{
background:#333;
color:#eee;
font-size:12px;
}
li p{
background:#666;
color:#222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDown"><div id='click'>Click Me</div>
<ul>
<li><div></div><h1>Title 1</h1><p>Option 1 html here</p></li>
<li><div></div><h1>Title 2</h1><p>Option 2 html here</p></li>
<li><div></div><h1>Title 3</h1><p>Option 3 html here</p></li>
<li><div></div><h1>Title 4</h1><p>Option 4 html here</p></li>
</ul>
</div>

This can be accomplished with pure css assuming your content within the drop-down menu is remaining the same.

Related

jQuery dropdown menu in same div

I want to show drop down menu on mouseover. Now I am using 2 divs and use slideup to show another div for sub menu; I want to show sub menu using 1 div on mouseover. How can I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
});
$("#flip").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
}
#panel {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="flip">
<ul>Home</ul>
</div>
<div id="panel">
<ul>Sub
</br>
Sub
</br>
Sub
<ul>
</div>
</body>
</html>
`
A nested unordered list would work, something like this:
<ul id="flip">
<li>Home
<ul id="panel">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
In CSS, all you would need is to hide your sub-menu:
#panel {
display:none;
}
jQuery is the same as you had it.
See here: http://jsfiddle.net/kaizora/23uuL/
PS: If you are using a <ul> tag, in valid HTML, there should be nothing else but <li> tags inside.
How about this:
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
$("#panel").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
Fiddle Here: http://jsfiddle.net/vWGsC/
If you want to you cold also use pure CSS.
<ul class="nav">
<li class="dropdown">
Home
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="dropdown">
second dropdown
<ul>
<li>...</li>
</ul>
</li>
</ul>
</li>
This would be the html from something I have saved some time ago.
Try it out! :)
http://jsfiddle.net/patrickhaede/dqxm4/
DEMO Background color is for clearly view for user.
var temp = $('#flip ul li:eq(0)').nextAll();
temp.hide();
$('#flip ul').mouseenter(function(event) {
temp.slideDown("slow");
});
$('#flip ul').mouseleave(function() {
temp.slideUp("slow");
});
#flip li , #flip ul { list-style-type: none; background-color: yellow;}
Home
Sub
Sub
Sub

Jquery Div slide transitions From Right To Left not working Properly

I create one page transitions in jquery like "http://support.microsoft.com/" this.
My problem is when page transitions done, it start from left. Please refer this fiddle (Working Code) and you can understand what happen. First I click on "Page 1" from drop down menu. First div comes from right to left (←) and its perfect, then after I click on text from First Div and Second Div comes from right to left (←), this also perfect. after that I click on text from second Div and third Div come from right to left (←) and Div 1 and 2 goes hide # left side, that's fine. but now problem start. when I click on "page 1" from navigation, My hidden divs come from left to right (→) in place of right to left (←). What I should I do ?
Here Is my Code
HTML
<div class="codrops-top clearfix">
<!-- <a class="codrops-icon codrops-icon-prev" href=""><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href=""><span>Back to the Codrops Article</span></a></span> -->
</div>
<div class="pt-wrapper">
<div class="pt-trigger-container">
<div class="navigation right">
<ul>
<li><img src = "menu.png" width = "25">
<div style = "margin-left:10px">
<ul>
<li id = "page1"><a>Page 1</a></li>
</ul>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div id = "container1" style="left:80%;background:#98bf21;height:100%;width:200px;position:absolute;display:none">
<ul id = "contaoneritem1">
<li><a>Content 1</a></li>
<li><a>Content 2</a></li>
<li><a>Content 3</a></li>
<li><a>Content 4</a></li>
<li><a>Content 5</a></li>
<li><a>Content 6</a></li>
</ul>
</div>
<div id = "container2" style="left:80%;background:#98bf21;height:100%;width:200px;position:absolute;display:none">
<ul id = "contaoneritem2">
<li><a>Content 1.1</a></li>
<li><a>Content 1.2</a></li>
<li><a>Content 1.3</a></li>
<li><a>Content 1.4</a></li>
<li><a>Content 1.5</a></li>
<li><a>Content 1.6</a></li>
</ul>
</div>
<div id = "container3" style="left:80%;background:#98bf21;height:100%;width:600px;position:absolute;display:none">
<ul id = "contaoneritem3">
<li><a>Content 1.1.1</a></li>
<li><a>Content 1.2.1</a></li>
<li><a>Content 1.3.1</a></li>
<li><a>Content 1.4.1</a></li>
<li><a>Content 1.5.1</a></li>
<li><a>Content 1.6.1</a></li>
</ul>
</div>
CSS
body{overflow:hidden}
.navigation ul{ float:right;}
.navigation ul li{ float:left; padding:0px 300px 0px 5px;cursor:pointer}
.navigation ul li a{cursor:pointer}
.navigation ul li div{ display:none;}
.navigation ul li:hover div{ display:block; position:absolute;z-index:9999}
.navigation ul li:hover div ul{ float:none; margin-left:-30px;}
.navigation ul li:hover div ul li{ float:none; text-align:left; padding:0px; background:#110000; border-bottom:#dddddd solid 1px;}
.navigation ul li:hover div ul li:hover a{ background:#fff; color:black}
.navigation ul li:hover div ul li a{ padding:3px 5px; display:block; width:100%;color:white}
JS
$(document).ready(function(){
$("#page1").click(function(){
var div3=$("#container3");
div3.animate({left:'120%'},"slow");
$("#container1").show();
var div=$("#container1");
div.animate({left:'20%'},"slow");
});
});
$(document).ready(function(){
$("#contaoneritem1").click(function(){
$("#container2").show();
var div=$("#container2");
div.animate({left:'40%'},"slow");
});
});
$(document).ready(function(){
$("#contaoneritem2 li a").click(function(){
var div=$("#container2");
var div1=$("#container1");
div.animate({left:'-100%'},"slow");
div1.animate({left:'-100%'},"slow");
$("#container3").show();
var div3=$("#container3");
div3.animate({left:'20%'},"slow");
});
});
You are moving the container 1& 2 to extrem left thats why it start coming from left to right, do following changes :
$(document).ready(function(){
$("#page1").click(function(){
var div3=$("#container3");
div3.animate({left:'120%'},"slow");
var div2=$("#container2");
var div1=$("#container1");
div2.css("left", "100%");
div1.css("left", "80%");
$("#container1").show();
var div=$("#container1");
div.animate({left:'20%'},"slow");
});
});
Fiddle DEMO

Javascript to make dropdown menus on hover state - no hard-coding in HTML

Thanks in advance. I have actually tried several javascript scripts to get this to work and none have, but my understanding of javascript is pretty rudimentary.
I cannot adjust the code of the link itself - it is being generated. But it is generated with an id and a class. I would like to have a script in the document that references the link's id so that when the user rolls over the link, a hidden ul (or div) appears - like a normal css navigation dropdown but, again, i cannot alter the code of the actual links. I can only alter the CSS in general.
Is there javascript that can do this? I can do query..
Thank you again!
bb
Here i have done drop down menu using HTML and CSS only, which show/hide on menu link hover state.
HTML:
<div id="menu1" class="menu">
<a href="#" id="link1">
Menu-1
</a>
<div id="menulist1" class="menulist">
<div>
Option1
</div>
<div>
Option2
</div>
<div>
Option3
</div>
<div>
Option4
</div>
<div>
Option5
</div>
</div>
</div>
<div id="menu2" class="menu">
<a href="#" id="link2">
Menu-2
</a>
<ul id="menulist2" class="menulist">
<li>
Option1
</li>
<li>
Option2
</li>
<li>
Option3
</li>
<li>
Option4
</li>
<li>
Option5
</li>
</ul>
</div>
CSS:
.menu{
font-size:15px;
display:inline-block;
margin:0px;
padding:0px;
}
.menu a{
display:block;
width:120px;
text-align:center;
background-color:#2211ce;
color:#dccb00;
text-decoration:none;
}
#menulist1{
position:absolute;
top:33px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menulist2{
position:absolute;
top:20px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menu1:hover #menulist1{
display:block;
}
#menu2:hover #menulist2{
margin-top:13px;
display:block;
}
.menulist div{
margin-left:0px;
padding:3px;
width:112px;
}
.menulist li{
list-style:none;
width:72px;
padding:3px;
margin-left:0px;
display:block;
}
.menulist div:hover,.menulist li:hover{
background-color:#1155ac;
color:#dccb00;
}
I have also done bins for above example, please click on http://codebins.com/codes/home/4ldqpbo

Menu Item Hover JavaScript

If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.
http://jamessuske.com/will/
I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.
This is my JavaScript:
<script type="text/javascript">
function showGalleryNav(){
document.getElementById('headerNavGallery').style.display = "";
}
function showInfoNav(){
document.getElementById('headerNavInfo').style.display = "";
}
function hideGalleryNav(){
document.getElementById('headerNavGallery').style.display = "none";
}
function hideInfoNav(){
document.getElementById('headerNavInfo').style.display = "none";
}
</script>
And The HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Info</li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li>William Ruppel</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div><!--headerNavInfo-->
I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with
$('#headerNavGallery").css("display", "");
also didn't work,
Any ideas would be greatly apperiated.
Actually what you are trying to accomplish is all css-only doable but not with that markup structure. First you need to nest your lists.
<ul class="menu">
<li>item 1</li>
<li>
item 2 with sub
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
... so on ..
</ul>
</li>
</ul>
some css
.menu li {
position: relative;
}
.menu li ul {
position: absolute;
top: 30px; /* the height of the root level item */
display: none;
}
.menu li li {
position: static; /* or you could float these for horizontal menu */
}
.menu li:hover ul {
display: block;
}
These are pretty much the basics. But I strongly suggest you go and study superfish menu as it's jquery drop drop menu but it degrades nicely with js off, so you could just study the css of it. http://users.tpg.com.au/j_birch/plugins/superfish/
Check that typeo, nvm...
Setting the display property should always have a value "none" or "block", empty("") is a bad reset... try this:
<script>
$(".galleryNavToggle").on("mouseenter mouseleave", function(event){
var headNavGal = $("#headerNavGallery");
if(event.type === "mouseenter"){
headNavGal.show();
}else if(event.type ==="mouseleave" &&
((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
$.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
headNavGal.hide();
}
});
$("#headerNavGallery").on("mouseleave", function(event){
var headNavGal = $(this);
if(event.type ==="mouseleave"){
headNavGal.hide();
}
});
</script>
HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
AND CSS
.headerNav{
border:thin solid black;
float:left;
}
.headerNavGallery{
float:left;
border:thin solid black;
margin-left:-1px;
}
1) Gallery
You don't need to specify javascript:. This is redundant.
2) It is working exactly the way you programmied it to work. When you mouse-out, it disappears.
3) You have code for "headerNavInfo" but no matching HTML.

2 column layout for submenus

I am trying to create sort of Jquery Ui megamenu's or even suckerfish style. But can not use them as a plugin in my code.
I have a 2 column layout in my sub menus. How do I tweak the existing code to show it in a 2 column layout? Here's my jsfiddle.
To my understanding, i will have to play a lot with css in this. As I tried doing it by having 2 Unordered list in the main list and gave float right and left consecutively and used clear both.
As you can find that one column already exists.the other column would be dynamically updated through ajax call.
Any help would be appreciated.
Here's a simple demo:
http://jsfiddle.net/brvX3/11/
html:
<ul>
<li>Menu item
<div style="display:none">
<ul>
<li>Menu2 item1</li>
<li>Menu2 item1</li>
</ul>
<ul>
<li>Menu2 item2</li>
<li>Menu2 item2</li>
</ul>
</div>
</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
CSS:
body {
font-family:arial;
font-size:10px;
}
ul, li {
margin:0;
passing:0
}
ul > li {
float:left;
position:relative;
}
ul li a {
display:block;
padding:3px;
width:80px;
background-color:#e0e0e0
}
ul div {
position:absolute;
width:180px;
background-color:#e0e0e0
}
ul ul {
float:left;
width:90px
}
ul li a:hover > div {
display:block;
}
JS:
$("ul a").hover(
function(){ $(this).next().show() },
function() { $(this).next().hide() }
);
$("ul div").hover(
function(){ $(this).show() },
function() { $(this).hide() }
)

Categories