I'm trying to include a navigation menu where the viewer hovers over the link such as Main or Home and somewhere else in the page it display an image.
Similar to this : [URL]
But instead of pixels, I would just like images to be displayed.
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); .....
How to create a Rotating Image Frame with Navigation Menu
like this: [URL]
like from the site: [URL]
what is the code for creating image rotation like this?
I have a drop down jquery menu with links and a image slide show with links. When I mouse over on the drop down menu, the drop down menu links go behind the image slide show [URL]
View 1 Replies View RelatedI 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:
<style type="text/css">
span.position
{vertical-align: top;
[code]....
Ive been working on a site with a dropdown menu. its styled with css and animated with java i would like to add support for keyboard navigation.
var DDSPEED = 5;
var DDTIMER = 5;
main function to handle the mouse events [code].....
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.
[url]
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(){
[code]....
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 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.
[Code]...
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.
$('ul#nav>li:has(ul)').click(function() {
$(this).children('ul').slideToggle();
return false;
});
<ul id="nav">
<li><a href="#Home">Home</a></li>
<li><a href="#Products">Products</a>
<ul>
<li><a href="#Apples">Apples</a></li>
<li><a href="#Bananas">Bananas</a></li>
</ul></li>
<li><a href="#Services">Services</a></li>
</ul></div>
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.
I'm looking for a menu like the white and grey one on the left of the following page [url] how to find something similar to use?
I don't mind about the bottom box containing the link description, I don't think this would help the navigation...
Is it possible to make a sliding navigation menu with a dropdown list. Here is an example of the menu I am referring to: [URL]
View 2 Replies View RelatedI'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it. The bolded line of the code is where I tried to set that up...
Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<script type="text/javascript"><!-- this is from [URL]-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}}, function () {
// on hovering out, fade the element out
if (!is_page(current)){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}}});});
</script>
<ul id="mainmenu">
<li id="home">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div>
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.
I have a simple navigation bar using an ul with images.
I have the following script that swaps out the images on mouseover and mouseout to create "hover" effect.
The issue is when I try to set the src attribute of the image that has been clicked the image does not change. The first part of the click event is working and resets the src of all the images as expected, but the second part that sets the src for the image clicked does not either run or runs before the reset.
Anyways, I use the Jquery UI Tabs plugin for navigation within a page on my website. I have two tabs on this page and I would like to have one image at the bottom of the first tab content that just simply opens the second tabbed content. I read this wiki on the documentation section of the plugin page:
..select a tab from a text link instead of clicking a tab itself var $tabs = $('#example').tabs();
// first tab selected $('#my-text-link').click(function() {
// bind click event to link $tabs.tabs('select', 2);
// switch to third tab return false; });
This is the code that I have for the image (it also uses a simple javascript image hover effect on it as well)
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('consultation','','../weddings/pagegraphics/consult_b.png',1)"><span><img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" /></span></a>
So when I read the the above wiki, i assumed that you put it in head like this:
$(function(){
/* $('#tab-me').tabs(); */
$('#tabmain').tabs(4, { fxFade: true, fxAutoHeight: true});
$('.scroll-paneMap').jScrollPane();
var $tabs = $('#tab1').tabs(); // first tab selected
$('#consultation').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
Where I used the id of the image as the first "blind click event to link" and the name of the first tab that is opened when you view the page as "tab1" and the name/id of the tab that I would like to open on click is tab2. This is my basic code setup:
<div id="tab1" class="tabContent">
<div class="scroll-paneContact">
MAIN CONTENT GOES HERE
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('consultation','','../weddings/pagegraphics/consult_b.png',1)"><span><img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" /></span></a>
</div><div>
<div id="tab2" class="tabContent">
<div class="scroll-paneContact" >
FORM TO LINK TO FROM TAB1 GOES HERE
</div></div>
I'm working on a simple mouseover function to swap div/image fade IN and OUT and I'm getting this white flicker in between. It seems like the fadeIn waits for the fadeOut to start, hence the flicker. I've searched and found solutions, but can't implement them correctly as I am more of a beginner with JS and jQuery.
[Code]...
The site is [url]. A doctype is set.
The CSS for the navmenu is:
Works fine in all other browsers and versions. Affects about 5% of visitors, but one is my client :)
How to use java script for navigation menu
View 1 Replies View Related<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) {?>
<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
[Code].....
how I can clean it up a bit, since there is stuff in there I don't think I need. I would like it to only be "Nyheder", under this there shall be (as now) a list of post, shown by which month they where made.
I came across this awesome image slider: Thumbnails Navigation Gallery with jQuery. The problem is ..you have to click on "best shots" to see the thumbnail navigation...
1) How do you show this thumbnail navigation straight away on loading the page? (ie "best shots" and other list items dont need to be there)
2) and get the thumbnails show near the bottom of the page?
3) and also get the next image to fade in automatically say after 5 seconds, without having to click on a thumbnail, although one can?
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?
View 2 Replies View Related