I'm trying to replicate the navigation as seen in www.accenture.com
And this is what I've been able to achieve so far: http://alfadesigntech.com/new/pages/inside-page-template.html
I've used a java script to show/hide a drop-down menu which is actually a hidden div with more links. The problem is as soon as I leave the menu button, the drop-down menu hides again. While I can use a delay onmouseout, it is not the solution i'm looking for.
Possible solution as per my limited knowledge, is to somehow extend the hover area to cover the hidden box. How can I achieve this? Is there an alternate solution?
Any help will be hugely appreciated.. Thanks in advance..
Ps. I've a limited knowledge of javascripts.
you can place your div with links in one container with its triggering anchor - it should help.
<div id="menu-item-1" onmouseover=....>
<img/>
<div class="links">Show us on mouseover and hide on mouseout</div>
</div>
Although it often depends on particular markup.
Also possible solution - when links panel is open - you hide it if mouse out of it and mouse not over on anchor image.
Related
I know this is a JS/ jQuery problem, and I have very decent CSS skills but sadly my JS knowledge is failing me big time. I bought a website template recently for my portfolio. It's a good one but I'm really struggling to adapt it.
What I'm trying to achieve is:
when you mouse wheel scroll (up or down) through each content block, the links below (at bottom of page) are active based on the content above. Forwards and backwards. So basically the text links at bottom would be bold depending on the active content above it.
I'd also like the text links below to link to it's relevant content above. i.e. Project 3 would open Project 3 content (with the content animation).
For a start I've tried targeting each ID for the content blocks. i.e. id="project-3" then adding href="#project-3" but this is clearly not working. I also tried data-target="#project-3". Still no dice.
I'm trying to mimic the bottom navigation of this brilliant site here: http://fakemusic.fr/ (so as you wheel scroll through each artist, the links below are highlighted + they're clickable.
I made a Codepen here:
[Codepen](https://codepen.io/oioisaveloy/pen/eYzjGLr)
Apologies in advance, I couldn't work out how to de-activate the annoying preloader.
Thanks in advance!
With Jquery it is very easy
Give A unique data-id to your each "display-table" class and give a unique id also in anchor of "menu-item"
make a css class which has a highlight css like underline
then try jquery conditional js like if your "display-table class" has class "projects-item-active" then add class to anchor id and remove from siblings
and if someone clicking on anchor then add class "projects-item-active projects-item-animate" to "display-table" and remove from siblings.
click project 1 project 2 project 3 and see
Pen Added
[1]: https://codepen.io/mamun-rashid-raja/pen/zYBLRrp
I want to be able to click links in my top bar to display different content. Do I need to explicitly use data-toggler on each tag in my top bar?This seems crazy. Is there an easier way to achieve the navigation I am looking for? Similar to the switcher for uikit? Thanks in advance as I am very new to the foundation.
You can put the dropdown menus in the wrappers that will be toggling their opacity/visibility so that when you :hover over the element, the menu will appear below it or wherever you want for it to as a matter of fact.
Here's the pen.
The behavior of Switcher reminds me of the tabs element of Foundation (Tabs | Foundation for Sites 6 Docs). Unlike the dropdown, the Tabs element remains visible after you click it, even if the mouse pointer moves out.
I have been searching for a way to make a menu rise up from a menu bar underneath an image
I want it so when you click on an arrow the menu will open up and partly cover the image without affecting the position of other elements in the page.
I'm struggling to find a way to do this. The reason for posting in here is not for a complete solution but thought that maybe someone could point me in the right direction. For example does this have a name? Any jQuery plugins that might help?
I have tried to recreate this affect using slideUp() and slideDown() but i am unable to get it to do the desired affect. I also tried using accordion but was unable to get that to produce the desired affect.
Any help would be much appreciated.
If initially the menu with submit button need to be present at the bottom of the page:
try setting position: absolute; and bottom:0px; with defined height.
Then for the arrow mark, bind a click event.
In the click event callback function:
Use jQuery.animate function and change the height and top properties of css.
Even better if you don't want any animation, just toggle CSS class for the bottom bar.
On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.
I remember seeing a similar effect on this site at http://docs.meteor.com/
Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?
Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.
EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.
There is ready thing for that in bootstrap called scrollspy
Okay hi guys and girls.
I am looking to create a drop down box from a header, i want it to be custom i.e. a drawing. I am just not 100% sure how to go about it, I have an idea of making a basic div with links for the drop down box and making it display empty until i click on a link making the css of the div style display to inline,
I was just wondering if there is a better way to go about it? i also want the drop box to slide in from top to bottom and not just appear.
Any help will be great!
Thanks :)