Hello I have this smooth scrolling navigation fixed when user's scroll down to the site.. But when the page go up and removes the class nav_fixed the header part jumps through it.. How do I tweak my jquery code that also enables smooth scrolling of the header part when user scrolls up.. As you can see in the sample below the behavior of the header jumps and it's kind of a minor bug.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
May be this what you need? Let me know if you need something else. I have modified script to remove that jump you are telling. I have removed the classes when you reach header scrolling up all the way.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
var offset = $('header').offset();
$(window).bind('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else if(scrollTop == offset.top) {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
body{
margin: 0;
}
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
</body>
</html>
Related
I wanted my menu to close when any of the links were clicked, and the same when I clicked outside the menu area, I tried different ways and was unsuccessful, could you help me?
I tried to use javascript but the result failed, I'm still a beginner so I'm having trouble.
JS
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu(event) {
if (event.type === 'touchstart') event.preventDefault();
const nav = document.getElementById('nav');
nav.classList.toggle('active');
const active = nav.classList.contains('active');
event.currentTarget.setAttribute('aria-expanded', active);
if (active) {
event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
} else {
event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
}
}
btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);
I looked in various forums and classes, however, for some reason none of the scripts worked.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Mobile</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<header id="header">
<a id="logo" href="">Menu</a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Home</li>
<li>Serviços</li>
<li>Páginas</li>
<li>Projetos</li>
<li>Empresas</li>
<li>Cupcode</li>
<li>Recursos</li>
<li>Contato</li>
</ul>
</nav>
</header>
<script src="menu.js"></script>
</body>
</html>
Something like this should work. It's with JQuery.
I'm a beginner myself so it's maybe a bit too complicated or something else. But that did work for me.
It's not with your class and id names. It's just for you seeing how it can work.
$(document).mouseup(function (e) {
var container = $("#nav-toggle");
if (!container.is(e.target) // if clicked outside
&& container.has(e.target).length === 0)
{
container.hide();
$( "#nav-toggle" ).prop( "checked", false ); //to uncheck
}
});
$('.i').click(function() { // if i is clicked hide all the links
$('#nav-li').hide();
});
$('.nav-toggle').click(function() { // if the hamburger is clicked show them again
$('#nav-li').show();
});
#navbar {
text-align: center;
margin-top: -13px;
z-index: 999;
width: 100%;
font-family: 'Poppins';
position: sticky;
top: 0;
width: 100%;
height: 80px;
background-color: #fff
box-shadow: 10px 10px 20px #fff
}
.logo {
letter-spacing: 1px;
margin-bottom: -10px;
font-weight: bold;
margin-left: 10px;
font-size: 20px;
text-align: left;
font-family: 'Poppins';
padding: 5px;
text-transform: uppercase;
color: #000;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 15px;
right: 20px;
height: 30px;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: #000;
height: 2px;
width: 2em;
border-radius: 5px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
cursor: pointer;
position: absolute;
text-align: left;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
padding: 0;
height: 220px;
list-style: none;
background-color: #fff;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
background-color: #fff;
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle:checked ~ nav ul {
background-color: #fff;
}
.nav-toggle:checked ~ .nav-toggle-label {
display: none;
}
.nav-close-label {
font-size: 28px;
position: absolute;
top: 10px;
right: 24px;
display: none;
}
.nav-toggle:checked ~ .nav-close-label {
display: block;
animation: nav3 1s ease;
}
.fadeInBottom { animation-name: nav3 }
#keyframes nav3 {
from {
opacity: 0;
}
to { opacity: 1 }
}
.background {
background-color: white;
}
.spacer {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<header id="navbar">
<h1 class="logo">
<div>
Logo
</div>
</h1>
<input label="" type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul id="nav-li">
<li class="i">Home</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label" id="nav-toggle-label">
<span></span>
</label>
<label class="nav-close-label" id="nav-close-label">✕</label>
</header>
<div class="spacer"></div> <!--DONT COPY-->
</div>
I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.
The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.
SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});
You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?
Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}
I placed a negative z-index property on my image section to prevent it from overlapping the navigation bar, which caused the hyperlinks to not function properly. After I fixed that problem, I realized that my left and right buttons for my slideshow would not work. Any help enabling the buttons to work even with a negative z-index? All the code that I have pasted below is necessary.
HTML
<div id="container">
<header>
<h1><b>Seattle</b>&Metropolitan</h1>
<nav>
<ul>
<li>About</li>
<li>Buildings</li>
<li id="contact">Contact Us</li>
</ul>
</nav>
</header>
</div>
<div class="image-section">
<img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
<div id="caption"><div id="caption-text">A panoramic view of 1201 Third Avenue at night</div></div>
<button id="sliderLeft" onclick="left();"></button>
<button id="sliderRight" onclick="right();"></button>
</div>
<br><br>
<div class="content">
Seattle's history can be traced back to the 1850s, when pioneers and natives started building a great city filled with a diverse culure, beautiful scenery, and a vibrant enviornment. The metropolitan area of Seattle now is a high-tech hub, in which four Fortune 500 companies reside: <b>Amazon.com (#49)</b>, <b>Starbucks (#208)</b>, <b>Nordstrom (#227)</b>, and <b>Expeditors International (#428)</b>.
</div>
CSS
#charset "utf-8";
#container
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
header h1
{
font-size: 38px;
float: left;
font-weight: 100;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
}
header nav ul li
{
line-height: 105px;
display: inline;
padding: 45px;
font-size: 22px;
font-weight: 100;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
#center-image
{
width: 100%;
height: 480px;
}
#contact
{
padding-right: 0;
}
.image-section
{
margin-left: auto;
margin-right: auto;
width: 75%;
position: relative;
text-align: center;
}
.image-section #caption
{
position: absolute;
display: none;
bottom: 4px;
width: 100%;
text-align: center;
color: white;
background: #474747;
height: 50px;
line-height: 50px;
opacity: 0.8;
font-size: 20px;
}
.image-section button
{
outline: 0;
}
.image-section #sliderLeft
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
left: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
.image-section #sliderRight
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
right: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
JS
var images = ["img/seattleskyline.jpg", "img/spaceneedle.jpg", "img/ferriswheel.jpg"]
var captions = ["A panoramic view of 1201 Third Avenue at night", "The Seattle's landmark Space Needle", "The Iconic Great Wheel"]
var index = 0;
function left() {
index -= 2;
if (index < 0) {
index = images.length;
}
changeImage();
}
function right() {
changeImage();
}
function changeImage() {
index++;
if (index > images.length - 1) {
index = 0;
}
var targetImage = document.getElementById("center-image");
var caption = document.getElementById("caption-text");
$("#center-image").fadeOut(1000, function() {
targetImage.src = images[index];
$("#center-image").fadeIn(1000);
});
$("#caption-text").fadeOut(1000, function() {
caption.innerHTML = captions[index];
$("#caption-text").fadeIn(1000);
});
}
$(document).ready(function() {
$("#sliderRight").fadeIn(1000);
$("#sliderLeft").fadeIn(1000);
$("#caption").fadeIn(1000);
setInterval(changeImage, 7000);
});
z-index take effect when position is relative or absolute so if you want use it with your css
add position: relative; as following so z-indexs take effect
header nav ul
{
position: relative;
z-index: 9999;
}
.image-section
{
position: relative;
}
.image-section #sliderLeft
{
z-index: 999;
}
.image-section #sliderRight
z-index: 999;
}
Correct CodePen
Change your CSS for header nav ul to :
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
position: relative; /* add this */
}
Working jSfiddle
I am trying to place a ul list at the side of a div. The ul should begin at the right side and at the top of the div, and end on the bottom side of the div.
The problem is that it starts at the bottom of the div, not at the top of it. How can I fix it?
This is my code:
$(document).ready(function() {
$("#map").prepend('<img src="images/d2.png">');
var width = $("#map > img").attr("width");
$("#actions").css("width", width);
});
body {
margin: 0;
padding: 0;
}
nav {
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
position: fixed;
height: 100%;
width: 60px;
background: blue;
z-index: 1;
}
nav:hover {
width: 200px;
}
div#painel {
padding-left: 60px;
background: red;
width: calc(100%-60px);
display: block;
z-index: 0;
text-align: center;
}
div#map-container {
padding: 20px 0 20px;
width: 100%;
background: green;
text-align: center;
}
#map-interface,
div#map {
display: inline-block;
border: 0;
padding: 0;
margin: 0;
}
#map-interface {
background: gray;
list-style: none;
margin-left: -4px;
height: 488px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
</nav>
<div id="painel">
<div id="map-container">
<div id="map">
</div>
<ul id="map-interface">
<li>asda</li>
<li>asd</li>
<li>asdsad</li>
</ul>
</div>
</div>
<script src="jquery-1.11.2.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Inside the div#map, I have an image, and inside the list I will have a menu to interact with the image. The ul list should be a block with the same size as the image (or the div).
Try #map-interface { vertical-align:top; } to align inlined-block content to their tops.