Creating A Dropline Style Menu - javascript

I am trying to create a dropline style menu.
Please see my fiddle here - http://jsfiddle.net/oampz/38c6q/
The issue i'm having is, i don't want the brown menu - or for it to drop down/fade in.. I'm trying to get the sub menu items to simply appear in the grey coloured sub DIV.
$('#main-nav > li').hover(function(){
if(!$(this).find('.main-link').hasClass('active')){
$("#main-nav > li a.active").removeClass("active");
$(this).find('.main-link').addClass("active");
if($(this).find('li').length){
//$("#main-nav li a.close").stop().fadeIn();
//There is no .close
var that = this;
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
}
else {
$(this).find(".sub-links").stop().fadeOut( function(){
$(this).css('opacity','1');
$("#sub-link-bar").stop().animate({height: "1px"});
});
}
}
}, function(){
if($(this).find('li').length){
$(this).find(".sub-links").stop().hide( function(){
$(this).css('opacity','1');
});
}
$("#sub-link-bar").stop().animate({height: "1px"});
$(this).find('.main-link').removeClass('active');
});
Any help appreciated.

I've updated the code http://jsfiddle.net/38c6q/1/
replaced this
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
with
$('#sub-menu').html( $(that).find(".sub-links").html() )
To have them float next to each other, you can add this CSS
.sub-menu li{
display:block;
padding:0;
margin:0;
float:left;
}
And to add some colors and backgrounds to links, add some CSS like this
.sub-menu a{
display:block;
margin:0 5px;
padding:5px;
text-decoration:none;
Color:#333;
}
.sub-menu a:hover{
background:#333;
color:#fff;
}
updated Demo at
http://jsfiddle.net/38c6q/4/

Related

Jquery toggle bug on window resize with media query

I have an issue with the toggle button when window resizes. The issue is that I clicked on the toggle which shows up a list of items and i left it open, however when I resize the window the toggle is still left open despite the fact that I put display:none;on the media query.
HTML CODE:
<section id="nextprevsection">
<h2 id="nextprev">View more projects?</h2>
<ol class="select">
<li>Previous Project</li>
<li>Next Project</li>
<li>Back to work</li>
</ol>
</section>
CSS:
.nextprev{
display:none;
}
#nextprev{
display:none;
font-size:16px;
width:200px;
background:url(../img/work/downarrow.png) right no-repeat #333;
color:#FFF;
cursor:pointer;
padding:10px;
margin:auto;
margin-top:-150px;
}
ol.select {
display: none;
background:#666;
width:220px;
margin:auto;
padding:0px;
list-style-type:none;
}
.select{
display:none;
}
.select a{
color:#FFF;
text-decoration:none;
}
ol.select > li:hover {
background: #aaa;
}
JQUERY CODE:
//next previous
var nav = $('#nextprev');
var selection = $('.select');
var select = selection.find('li');
if ($(window).width() >= 768) {
nav.removeClass('active');
selection.css("opacity","none");
}
else{
nav.addClass('active');
}
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideToggle(200);
} else {
nav.addClass('active');
selection.stop().slideToggle(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
$(".select").css("display","none");
select.removeClass('active');
$(this).addClass('active');
});
</script>
MEDIA QUERIES CODE:
#media screen and (max-width: 768px){
/*Next and previous*/
#nextandprev{
display:none;
}
.select{
display:block;
}
#nextprev{
display:block;
}
#nextprevsection{
height:200px;
margin-bottom:100px;
}
}
Well, a screen re-size isn't necessarily going to invoke your code that detects the screen size. One option you have is setting a short timer that periodically checks the screen size and invokes your code.
But that's the lame answer. Try $(window).resize(function(){});
http://api.jquery.com/resize/
Basically it wraps the window.onresize event (which I honestly didn't know existed til recently, stupid DOM!!) and let's you do your own thing with it :)

slide bottom border in from left on hover

i have this css for my menu:
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:70px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#000000;
}
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #FFFFFF;
color: #FFFFFF;
text-decoration:none;
text-align: center;
}
#menu li a:hover {
border-color:#000000;
color:#000000;
}
i want to be able to make a bottom border (like the top one but on the bottom) slide in from the side on link hover
here is a fiddle: http://jsfiddle.net/2w6NB/
Position your element you want coming from the left to be
left: -200px; //or however much it takes to hide the element completely or partially
Then here is some sample code that you might be able to successfully use to model your functionality:
$( "#item" ).hover(function() {
$( "#item" ).stop().animate({
left: "-1" //shows item
}, 400);}, function() {
$( "#item" ).stop().animate({
left: "-160" //this determines how far back the item goes after hovering
}, 400);
});
Let me know if you have questions or if it works.
I believe this link will help you: Sliding with CSS and Affect Other Element on Hover
The goal here is to slide a line/boarder from an "overflow:hidden;" div using either CSS webkit transition or a javascript function. You cannot have this happen on the same object as the menu links, but you can set it so that there is a div directly underneath it that will let the bar slide in.
(An example of this is setting "right:200px;position:absolute;width:200px;border-top:solid black 5px;" to the inside object and the div surrounding it to "overflow:hidden;width:200px;". Then you use the transition on a css hover event or a javascript function to move over the object back into the div so that it can display.
I hope that helps!

Display only one list item at the center of the <div> with overflow:hidden

I'm trying out a vertical ticker that displays a few text list items one after the other, but I need some help in positioning them.
You'll see a web ticker with two items. To display only one item at a time, I have to set 'overflow:hidden' in #tickerContainer.
However, the text in the ticker is not being positioned at the center of the ticker(As you see it is sitting at the bottom).
Also, when I remove 'overflow:hidden' from #tickerContainer, which is the whole ticker moving away from the top of the page?
Please help me fix this.
http://jsfiddle.net/nodovitt/NYhY4/2/
<div id="tickerContainer">
<ul id="ticker" class="js-hidden">
<li class="news-item">Item Number 1</li>
<li class="news-item">Item Number 2</li>
</ul>
</div>
The jQuery function:
<script>
function tick() {
$('#ticker li:first').slideUp(1000, function () {
$(this).appendTo($('#ticker')).slideDown(1000);
});
}
setInterval(function () {
tick()
}, 2000);
</script>
The CSS:
#tickerContainer {
background-color:white;
border-radius:15px;
text-align:center;
margin:10px;
box-shadow:0 0 8px black;
color:#2B7CD8;
font-size:50px;
width:500px;
height:100px;
overflow:hidden;
}
.news-item {
font-family:Times New Roman;
font-style:oblique;
}
#ticker li {
list-style-type:none;
}
You haven't put any specifications on your ticker id. So something like this http://jsfiddle.net/NYhY4/10/
#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}
Here is my answer as requested by OP
Add this css to your #ticker
#ticker {
margin: 0;
padding: 0;
line-height: 100px;
}
NOTE The line-height will always have to be the height of the #tickerContainer
You can see it here http://jsfiddle.net/NYhY4/3/
#ticker li {
list-style-type:none;
position: relative;
bottom:20px;
}
I didn't like the current item being hidden by seemingly "nothing" (the blank part of li box above the text) so I used this approach:
Remove the margins from the '#ticker'
set '#ticker' padding-top (.5em worked best for me)
set '#ticker li' padding-bottom to push the next item out of view (I used '1em' to be safe but '.5em' worked too)
The words didn't look perfectly centered so
set '#ticker li' line-height to '1em'
#ticker {
margin: 0;
padding-top: .5em;
}
#ticker li{
line-height: 1em;
padding-bottom: 1em;
list-style-type: none;
}
http://jsfiddle.net/JvuKU/2/
Note This depends on the font-size of the '#tickerContainer'. If you change the height or font-size of the '#tickerContainer', just adjust the values of '#ticker' padding-top and '#ticker li' padding-bottom.

how to display list as table?

I have a list of items with different content floated left, I need to display them as a row.
<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>
I would like to display the list items in a row.
row height depends on max height item in row,
How to get it?
Demo
Add display:table-cell so it acts as table column. remove float:left as well.
#contentpane{}
#contentpane li{
padding:10px;
width:80px;
border:1px solid #000;
display:table-cell
}
DEMO
CASE 2
In case you need it with auto height then use the below white-space:nowrap; method
ul#contentpane{
width:100%;
white-space:nowrap;
}
#contentpane li{
padding:10px;
width:80px;
border:1px solid #000;
height:auto;
display:inline-block;
white-space:normal !important;
}
DEMO 2 || DEMO (Vertically aligned to the top)
you should go with javascript to set clear:both to row overflow element.
var ch=$("#container").width();
var itemsPerRow=Math.floor(ch/102);
var itemsCount=$("#contentpane li").length;
var loopRound=Math.floor(itemsCount/itemsPerRow);
for(var i=1;i<loopRound+1;i++)
{
var nextFirstItem=i*itemsPerRow+1;
$("#contentpane li:nth-child("+ nextFirstItem +")").css({"clear":"both"});
}
demo
ul {
display: table-row;
}
ul > li {
display: table-cell;
}
Note that you should have a wrapper with display: table in order to built a complete table representation.
Set height to the li.
#contentpane{
}
#contentpane li{
float:left;
padding:10px;
width:80px;
height:180px;
overflow:auto;
display:table-cell;
border:1px solid #000;
}
FIDDLE
Try this one
var maxHeight = 0;
$("#contentpane li").each(function( index ) {
var height = $(this).height();
if(height > maxHeight){
maxHeight =height;
}
});
$("#contentpane li").css("height",maxHeight);
Fiddle Demo
Drop the float and use inline-block instead:
http://jsfiddle.net/CmkSb/10/
#contentpane li{
padding:10px;
width:80px;
display:inline-block;
vertical-align: text-top;
border:1px solid #000;
}

Jquery to set img dimensions from parent

Im doing a nav.
Its a ul list. the 'a' tags and 'span's are in the same space and the span contains an image that is hidden.
The image does fadeIn/fadeOut which is successful.
Im trying to set the width of the img/span to the width of the li(the parent)
i cant seem to friggin do it. please help.
<ul id="nav">
<li>Web<br />Design<span><img src="images/nav-over.png" height="100px" /></span></li>
<li>Graphic<br />Design<span><img src="images/nav-over.png" height="100px" /></span></li>
<li>Our<br />Work<span><img src="images/nav-over.png" height="100px" /></span></li>
<li>SEO<span><img src="images/nav-over.png" height="100px" /></span></li>
</ul>
this was kinda on the right path...
var h = $('#nav li img').parent().height();
var w = $('#nav li img').parent().width();
$('#nav li img').width(w).height(h);
but it set all of the #nav li span height and width the same and not from the parent...
then i've tried this :
$('#nav li span').each(function(){$(this).parent().width()});
$('#nav li span img').each(function(){$(this).parent().width()});
which i know is poorly structured but i was just testing. but no it didn't work...
so for each #nav li span and #nav li img i want to set the width to the corresponding parent(li) width.
i think i explained this correctly. lol. thanks.
heres the css
#nav {
list-style:none; width:608px; height:100px; display:block; padding:0; margin:0; position:relative
}
#nav li {
background:url(images/nav-div.jpg) right top no-repeat; float:left; text-align:center;height:100px;
}
#nav li a {
color:#565555; font-size: 18px; letter-spacing:10px; line-height:25px; text-transform:uppercase; text-decoration:none;height:100px; display:block; padding:0 19px 0 19px; position:relative; top:0; left:0;z-index:900
}
#nav li a:hover {
color:#eaeaea
}
#nav li span {
position:relative; top:-100px; left:0; z-index:800; opacity:0.0;
}
Use .width() where you have .each(), and use .closest("li") instead of .parent(), and don't forget the return statements:
$('#nav li span img').width(function () { return $(this).closest("li").width(); });
$('#nav li span img').height(function () { return $(this).closest("li").height(); });
http://jsfiddle.net/KzhgQ/
Edit: Here's a more efficient version that prevents looping the images twice (thanks natedavisolds) :
$('#nav li span img').each(function () {
var img = $(this);
var listItem = img.closest("li");
img.width(listItem.width()).height(listItem.height());
});
http://jsfiddle.net/KzhgQ/1/
Call me crazy, but couldn't/shouldn't you be doing this with CSS?:
#nav li img {
width: 100%;
}
Assuming the CSS is set correctly (ie. block elements).
$('#nav li').each(function() {
var $li = $(this);
$li.find('span, span img').css({ width: $li.width(), height: $li.height()});
});
should work but untested.

Categories