3
I’m making this site but I can’t do two things:
the menu has to move to the contents as I click on the options
when the upload page has to appear centered along with the menu where you have Instagram.
I looked for several methods on the net to make the menu move and realized that the way to do this is by x and y coordinates only that I didn’t find any example of how to do.
Already the part of load I couldn’t find a code to do such a thing.
4
You can do both using Pure Javascript and jQuery for what I’ve seen in your project you’re already using jQuery so I set an example for you using jQuery because the code is simpler.
HTML
<div id="menu" class='source'>
<ul>
<li><a href="#contato" class='menu'>contato</a></li>
<li><a href="#quemsomos" class='menu'>quemsomos</a></li>
<li><a href="#redessociais" class='menu'>redessociais</a></li>
<li><a href="#teste" class='menu'>Teste</a></li>
</ul>
</div>
<div id="contato" class='source'><h2>contato</h2></div>
<div id="quemsomos" class='source'><h2>quemsomos</h2></div>
<div id="redessociais" class='source'><h2>redessociais<h2></div>
<div id="teste" class='source'><h2>Teste<h2></div>
CSS
.source{
position:absolute;
width:150px;
height:150px;
}
#contato{
left:50px;
top:300px;
background:#f00;
}
#quemsomos{
left:1500px;
top:500px;
background:#0f0;
}
#redessociais{
left:600px;
top:2000px;
background:#00f;
}
#teste{
left:500px;
top:700px;
background:#cccccc;
}
Javascript
$(document).ready(function(){
$(".menu").on("click",function(e){
// Pega as dimensões da janela
var W = $(window).width();
var H = $(window).height();
// Pega as coordenadas e dimensões do elemento
var elem = $($(this).attr("href"));
var x = elem.position().left;
var y = elem.position().top;
var h = elem.height();
var w = elem.width();
// Calcula as coordenadas que a tela tem que ser rolada para centralizar o elemento
x -= W/2 - w/2;
y -= H/2 - h/2;
$("body").animate({scrollTop:y,scrollLeft:x},400,"swing",function() {
var x = $("body").scrollLeft();
var y = $("body").scrollTop();
$("#menu").css({top:y,left:x});
});
e.preventDefault();
})
})
I took the liberty of looking at the code of your website and saw that the DIV that receives the content is the #ib-main-wrapper following the example I’m posting you will have to replace the $("body") of the animation by its div that receives the content $("#ib-main-wrapper")
Credits to editing by @Luizvieira for collaboration in the solution.
@Luizvieira Come on it’s almost right now, I went to the main.js and cleaned up everything that didn’t need to be there. Now the menu moves only think that I did not express myself right, because when it moves it has a specific direction that would be on top for example test and so is with others. As for the page load process when you first load it has to click e.g.: on the test element along with the menu on top of it. Here is the link to the updated page http://progdesenv.com.br/edermiguel/teste.html
@Luizvieira "2) in the links of menu items keep only the anchor identifier (without the full address of your site). For example: <li><a href="#contact" class="menu">contact</a></li>"
@user4451 Placing the menu over the element is only a matter of not using the values of scrollTop and scrollLeft, and yes the x and y coordinates of the element itself (which you already have!). If you discount a few pixels of y, the menu will be above the element.
-2
I understand that you need that by clicking on a menu link, you should be directed to the div in a horizontal or vertical animation effect. If so, you can use this example and modify the animation for the menu div. Example link
I believe your answer does not help much in solving the problem of the author of the question, to have an idea of how to answer the fact that you are new in stackoverflow use this reply as an example
Browser other questions tagged javascript menu coordinates
You are not signed in. Login or sign up in order to post.
It has nothing to do with the question but: On the post-it that the noise music on the bed is written deck on the bed* at the bottom. After q see I delete the comment.
– Caputo
I found the question very interesting, mainly by the interaction mechanism that you’re designing for the site. A curiosity: by chance your project considers that a large part of the public will use mobile devices with touch interaction (touchscreen)? I ask this because from a usability point of view I believe that there are no visual indications of the continuity of space and, strictly from the desktop environment point of view, the "click and drag" seemed tiring. Maybe this is even a hook for one or two other questions... I think UX questions are missing around here. :)
– Luiz Vieira
Luiz, the site was not really made for mobile, just for desktop, the concept of dragging is only a secondary option because when the site is complete it will load directly into the central content with the menu above. And the idea is that the person sees that they have more things to the side and click on the menu to see them. If I could change some things but you know how it is customer
– user4451
Yes, I had understood this dynamic of the question itself. Still, I suggest you do some evaluations with potential users to collect feedback. Depending on what THEY say, I think your client is able to hear.
– Luiz Vieira