I'm trying to understand how this kind of menu works : www.dantobinsmith.com/
How do you make the page associated with one of the menu items appear when you put your mouse over it?
Looking at the code base of the website I see that the developer has created the website primarily in JavaScript/JQuery where there is a full screen navigation that fades in the content when hovering on the correct navigation.
On clicking of the navigation item, the whole navigation is removed and the content appears at 100% opacity.
The website IS build oddly on Wordpress for backend editing, BootStrapper (getbootstrap.com) and JQuery and any additional javascript can be found here http://www.dantobinsmith.com/wp-content/themes/dts/app.min.js to inspect yourself.
you could do it with css:
#input:hover { background-coler:blue; /*additional css for #input on hover */}
or javascript:
<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>
Related
What is the name or how can I make the effect of the scroll (when a scroll happens the page leads the user to another section of the page without showing the scrollbar) of the website below:
Website
And how it can be do it using pure css/js or React if possible?
It looks like the they're using a fullpage or fullscreen scrolling effect.
Here is the github link for the package they're using to do it:
https://github.com/alvarotrigo/fullPage.js/
I am trying to create a sidebar navigation alot like this website:
http://www.josephleonard.com/
I am currently using the Adaptive Theme in drupal and using panels. I have the whole layout perfectly. All I need to figure out is how to trigger a panel after selecting an item on the menu as it does on this website. Any help will be appreciated!
Use CSS to hide your pop out panel by default. display: none; then use JQuery to show your pop out panel when a menu link is clicked. See this post for both a CSS and jQuery solution. https://css-tricks.com/snippets/jquery/styled-popup-menu/
so i have a website with multiple pages and a navigation menu with links to the other pages.
i need a Jquery and/or CSS page transition that'll slide the page down, load new page and then slide that page back up.
This would be easy to do if the content of all the pages was in one single page, in different divs, and then i could just make a sort of carousel to show the div corresponding to the link that was clicked. Most of the answers i found applied to that situation. this is not the case though so that wouldn't work and i can't touch the html of the site!
css3 transitions work great when the page loads, but they also need to happen onbeforeunload, which is where the problem lies. i can use jquery to give the divs a class onbeforeunload, which works, but it unloads before the animations even start happening.
I've tried this plugin:
https://rawgit.com/votum/page-transitions/master/demo/index.html
but it looks very glitchy and doesn't work properly.
any ideas?
You can check out accordion to show content of selected menu item.
https://jqueryui.com/accordion/
Can't clear the problem with conflicting modules and menu. I have tried to disable jQuery and JS, use non conflict but there is a problem with mobile menu (you should minimize browser window to see mobile menu) on the website. Sometimes it appears on homepage when mobile menu goes behind the slider and is not visible. However if you go to NEWS page you will see calendar icon also conflicting with mobile menu. Do anyone have any solution?
Thank you!
You need to order the elements with z-index in the right order.
Add this code to your css file templates/shaper_helix_ii/css/template.css
.sp-mobile-menu{z-index: 9999;}
.sp-main-menu-toggler{z-index: 99999;}
I have a responsive theme. When viewing the website on small screen, it shows "menu" and you have to tap it to see the menu items. What I want to do is show the menu items straight without the user having to tap "menu" before seeing them. I tried using Firebug to see what triggers it and tried removing that. But that messes up my whole site in desktop view as well.
Here is the link. If someone could point me in the right direction by telling me what code to remove that'd be great. Your help is really appreciated.
I believe it is hidden via css. So to initially show that menu when the browser is mobile go into the bootstrap-responsive.css file on line :1424 and change 'display:none' to 'display:block'. Just to be clear this is the code your looking for.
nav#main_menu.smooth_menu ul {
display: none;
background:#fff;
}
It is in the #media (max-width: 767px) media query.
That should initially show the menu when a user is on a mobile browser while keeping the toggle functionality.
Add the below <script> in your page inside <head>. What it does is simulate a click on "menu" at startup.
<script>
$(document).ready(function() {
jQuery('.zn_menu_trigger a:visible').click();
});
</script>