JQuery :: Navigation - Put The Simple Drop Menu From Css ?
Dec 27, 2011
I am working and designing a website, and have put the simple JQuery drop menu from css tricks on my website, but every time i zoom in and out the website using ctrl +&- the site gets smaller or larger however the navigation moves and some bottoms from the menu drop down to the left or right under the first or last buttons, so does anyone know how i can fix and block the menu from moving around using HTML and its own CSS Style page, let me know.
click on the link below to see the demo for the navigation.
Well I have used this same script a few times, but this time I am having an issue, When I hover the text the drop down shows, as soon as I try to hover the drop down it will disappear.I am also trying to make the background stick on main text (hover text) untl the mouse moves off. Been stuck on this for hours.Here is my HTML
I don't know much about javascript, but it seems every time I come across something relating to "drop down menus" such as this one: [url] - you have to enter the link codes on every page you display the menu on.
So, here's my question. I want to display a drop-down menu bar similiar to the one in the link. I want it on ALL of my pages within my website, and the website has LOTS of pages - those I've built in Frontpage with HTML. I know I have to have the .js file and something else copied into the header of the pages, but it's telling me to copy and paste the menu bar part (with the links) into the body. If I do that, I'll have to go in and manual change all the links in EVERY page if I want to add or delete a link. I know there has to be a way in which I can make this happen on every page without and just edit one file if need to change something.
I'm after a drop down script that basically you press categories and down it drops with say one side products by category the left side and say product by price the right side.[url]... do it when you click on one of the top links I'm just not sure of the name and the most easiest to implement?
I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected.The way I want it to work...
1 clip is $7 2 clips are $12 3 clips are $22 5 clips are....etc.
...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total.
1 clip is $7 2 clips are $14 3 clips are $21 5 clips are....etc.[code].....
I am having a bit of trouble attempting to get this button roll over stuff working. I have looked up some really simple code to create a image rollover action for my navigation buttons. But nothing happens when I hover on any of the buttons though. When I use firebug to figure out what is wrong, it says that $(this) is the document and not the image button. The example/preview is here: [URL].
This is the jQuery code here for quick reference: <script type="text/javascript"> $(document).ready(function(){ $('#navigation img').hover( function() { $(this).src = $(this).src.replace("Red","Yellow"); }, function() { $(this).src = $(this).src.replace("Yellow","Red"); }); }); </script>
I am looking for a good tutorial on how to do a simple photo gallery. I want to photo gallery to transition by using arrows to go back and forth. I found a few tutorials but none that explain it in detail. I am familiar with jquery but not too familiar with java. Here is an example of the gallery I would like to create:[URL]
i'm having with a superfish menu i have tried to add to my wordpress site.The menu seems to work fine for the base-level (top parent pages) menu items.But the drop down menus seem to flash on screen for just a second and then disappear when the mouse hovers over the menu items.To see an example, please check out the top menu on this temporary development page: http:[url].....I have tried adjusting the z-index in superfish.css file but it doesn't seem to be having any effect.
I'm looking for a super-simple sliding gallery plugin that would produce something similar to this: http://labs.paulicio.us/viewport/ .The only thing is I'd like there to be no visible "next" and "previous" type button until the user mouses-over the gallery. I KNOW I've seen this somewhere but it appears I forgot to bookmark it!
I am trying to customize the navigation on The Simple Controls Gallery.so that instead of the play buttons being displayed the anchor links are the ones that are being cycled through.immediately received an error indicating that an element had not been called correctly. How do I call those anchor links correctly.I place the javascript call on the links themselves which provided me with the functionality of pressing each one to make the gallery advance forward or backwards, but how would I make it so that as the images rotate the anchor links hightlight giving an indication of what the current image link is?
I am looking to use JQuery which I am really new to and get my navigation submenus to slideDown when the parent is rolled Over. I have multiple parents and children or sub menus and want them to activate individually but without repeating the JQuery over and over again for each.Obviously the goal is to also slideUp on the mouseOut event.Here is the code that I have so far:
The purpose of the code is to slideToggle open one of two hidden sub-nav bars when either of two different menu items are clicked upon - instead of a drop down menu. What doesn't work is the hiding of the div that is not required, if it is already open. Viewing in firebug shows that the appropriate classes are being applied - I suspect the reason is that slideToggle has been somehow set and cannot be unset via another object - but perhaps that is not it at all?
$(document).ready(function() { //add .toggle function to appropriate li element $('#hozmenu li:nth-child(4)').toggle(function () { //set 4th menu links colour to be green whilst div is shown $('#hozmenu li:nth-child(4) a').css('color', '#95d890'); $('#toggle_nav_services').removeClass('toggle_show'); [Code]....
I have a navigation menu. Right now, when you hover over a menu item an image flies over the top of it. This image is set in my CSS as "nav li em". However, that image flies in to the same spot for every menu item. This is what I would like: When you hover over Item 2, em2 is invoked for the FlyIn. When you hover over Item 3, em3 is invoked.
Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]"> <html xmlns="[URL]" xml:lang="en" lang="en"> <head> <title>help</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#nav a").append("<em></em>"); $("#nav a").hover(function () { $(this).find("em").animate({ opacity: "show", top: "-34"}, "fast"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); .....
I have developed a navigation menu and it works perfectly except for one problem. When hovering from the main menu to the submenu, the submenu fades out then fades back in quickly. I have no idea what is causing this. Here is my code:
var sub_menu_hover = 0; var main_menu_hover = 0; $('.showcase_submenu').hover(function(){
On this link you will see my test site:At the moment I am not too happy with the animation on the navigation menu.As you will see as you click quickly through the various links the animation is very jumpy because of the way I have coded it.Also when you click on the gallery page and then select the various gallery images, the animated ball moves all the way to the left.Here is the JQuery code for the animation:
PHP Code:$(function() {//event object (notice it in the parameter list) contains data about the event handled$(".linkbox").mouseover(function(event){//selectedDiv is the clicked object, so you can do what ever u want on the box clicked ;)var selectedDiv = $(this);var divPosition = selectedDiv.position();var divPositionLeft = divPosition.left;$(".circle").animate( {"left": + divPositionLeft}, "100" );})})function movebacka() {Each page has an include file with the nav menu contents, so every time you click a link in the nav menu, a new page has to load, therefor causing the jumpiness in the animation. What are the best ways to resolve these kind of issues.
I have a JQuery script that gives a neat effect on the navigation and want to include a simple fading slideshow on the same page.Any script I have tried for the slideshow either uses JQuery or Mootools and it conflicts with the navigation script.Can anyone recommend a smooth fading slideshow that wouldn't conflict or suggest how I can get around this. I read a bit about 'no conflict' but don't understand how to implement it.
, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look [URL] The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working, it seems to be sliding down even though this was not defined in the code.
I am trying to make a navigation menu that when a link is clicked, loads content into a hidden div, then shows the hidden div, then changed the class of the list item. If the same link is clicked again the class reverts back to what it was before and then the content div becomes hidden.
I've a navigation menu that has some sub-menus and I want to show them only after a click on the parent link. But every click on the sub-menu collapse the menu again.
When I click Products and than Apples it hides the level 2 UL. But it should go to #Apples instead. I can not change the HTML since it comes out of a CMS. So I have to deal with that structure. How can I prevent the level 2 UL collapses when I click on Apples or Bananas?
I am trying to add a class to my menu for the page it is currently on.
I followed this example: [url]
But I am not able to make it work at all.
Here is my HTML:
To make the nav element highlighted, the list item must have a class of 'hover' like this '<li class="hover">...'
And here is my jQuery:
The script is not applying any CSS to the list elements. I tried different combinations, tried to add a class to the a element by removing parent(), but nothing is triggering.
My goal right now is to make a two-part navigation bar where you don't have to reload the whole site, when you click on a link. The navigation bar consists of two <ul> lists with <li> float:left and <a> display:block, so I basically have two lines. It's probably easier to understand if you see it for yourself: jsfiddle (had to change the css style, because I use .less but it works)
When you load the page it's just like that, you have your main category (A,B,C,D,...) and the sub-category (A1,A2,A3,...). What I want: If you click on B, the sub category changes to B1,B2,.... If you click on a sub category the site loads the requested page (with ajax = best solution?!)
My thoughts
At first I thought about just changing the name and href attribute of the second list, but the main categories have different amounts of sub categories, so I would need to add or remove <li>'s. Then I thought about using .load() but I somehow screwed up (of course) and the loaded <ul> doesn't have any css style (wrong order?) and I can't see anything. (with a loaded test.html site containing only the word "test" it worked) Is ajax "overkill" as a solution?
CodeIgniter and the URL
I use CodeIgniter (a PHP framework) for the website and URLs like this: www.example.com/maincategory/subcategory (e.g. example.com/A/A3) That's no problem at all, if I don't use any javascript and reload the whole site every time. But is it possible to change the URL with jQuery when the user clicks through the navigation bar? You click on B, the URL changes to example.com/B all the subcategories change to B1,B2,...When you click on B2 the URL changes to example.com/B/B2 and the site loads the requested page (I guess with ajax, so the navigation stays the same?!)
Minor problem: when you load the site, click on B, then B3 for example, you would get the url example.com/B/B3. If you now save this link, close the site and reopen it with the link, CodeIgniter would load the right site and everything, but the navigation would show A1,A2,.. in the sub category.
Hover vs click
Almost every page where I saw this kind of menu they used hover to change the sub category. But I thought click would be better, so you don't have to avoid touching B,C,D,.. if you want to go from A to A9 for example. Only downside is that you have to click before you see the sub categories.
Summary
A two part navigation menu you can use without reloading, changing URLs (when possible) and probably ajax to load the actual content.
I have implemented Superfish in SAP Portal. there is a small issue when I take a print using the browser's print option. When I try printing the Web Page from the browser, the Top Level Navigation Menu appears as a list of links (vertical). This is happening in both IE as well as Firefox.
I have seen the same issue in the website from where I downloaded Superfish :-|
1. Goto: [URL]
2. Click on 'Print Preview' button in your Browser.
3. The Superfish Menu below the text 'The result:' will appear as a list of links in the print preview.
