I'm making a website to serve with an app for a college job, the desing is okay (for now, and it worked cool on the smartphone.
However, in the menu there is an error when I press any menu item, a light blue box appears, disrupting the app's desing, something else is the < li > which are only appearing when I keep my finger pressed for long in the item. Here is the image of the error:
Themysteriousblueboxdisruptseventheeffectofthehover,thecolorofit..
Ifyoucannotremoveit,howdoIchangethecolorofthebox?Anothererroristhedelaytoloadthepage(awhitescreenappearsbetweenthisprocess),exampletoreferences,strangebecauseonlythefontsareonline.
Herethenthecssandhtmlfiles(ofatemplate)withoutimages,ofcourse:
$(document).ready(main);
var contador = 1;
function main () {
$('.menu_bar').click(function(){
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
// Mostramos y ocultamos submenus
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
};@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200);
* {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #F9FFF9 ;
font-family: 'Titillium Web',sans-serif;
text-align: justify;
}
.menu_bar {
display:none;
margin: 0;
}
header {
width: 100%;
}
header#titulo h1{
font-size: 19px;
/*margin-bottom: 0;
margin-top: 0;*/
color: white;
text-align: center;
background: #d40000;
}
header#titulo h2{
font-size: 13pt;
color: white;
background: #80c939;
text-align: center;
}
header nav {
background:#80c939;
z-index:100%;
max-width: 100%;
width:100%;
margin: 0;
}
header nav ul {
list-style:none;
margin: 0;
text-align: center;
}
header nav ul li {
display:inline-block;
position: relative;
}
header nav ul li:hover {
background:#d40000;
}
header nav ul li a {
color: #444444;
display:block;
text-decoration:none;
padding: 20px;
}
header nav ul li a:hover {
color: white;;
}
header nav ul li a span {
margin-right:10px;
}
nav img#logo{
opacity: 0;
position: relative;
float: right;
top: 0;
}
nav img#logo:hover{
opacity: 1;
}
footer#final{
clear: both;
border-color: #80c939;
border-style: solid;
}
footer#final p{
font-family: 'Arial', sans-serif;
font-size: 13px;
text-align: center;
}
.topo{
display: block;
width: 30px;
height: 30px;
float: right;
margin: 5px;
position: fixed;
bottom: 0;
right: 0px;
}
.topo:hover{
cursor:pointer;
}
@media screen and (max-width: 800px) {
body {
padding-top:60px;
}
.menu_bar {
display:block;
margin: 0;
width:100%;
height: 60px;
position: fixed;
top:0;
background:#80c939;
}
.menu_bar .bt-menu {
display: block;
padding: 15px;
margin: -1px;
color: #444444;
overflow: hidden;
font-size: 25px;
font-weight: bolder;
text-decoration: none ;
}
.menu_bar span {
margin-top: -13px;
padding: -10px;
float:right;
font-size: 40px;
}
.menu_bar a{
text-align: center;
}
header nav {
width: 80%;
height: calc(100% - 50px);
position: fixed;
right:100%;
margin-top: -7px;
overflow: scroll;
}
header nav::-webkit-scrollbar{
display: none;
}
header nav ul li {
height: 50px;
display: block;
/*border-bottom:1px solid rgba(0,0,0,.4);*/
text-align: left;
border: 0px;
}
header nav ul li span{
border: 0px;
margin-top: -8px;
float: right;
}
header nav ul li span img{
border-width: 0;
border: 0px;
}
header nav ul li a {
margin-top: 0px;
font-weight: bold;
display: block;
}
nav img#logo{
opacity: 1;
position: auto;
float: right;
}
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../css/estilo.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script><scriptsrc="../scripts/menu.js"></script>
<script src="../scripts/voltar.js"></script>
</head>
<body>
<div id="interface">
<header>
<div class="menu_bar">
<a class="bt-menu"><span><img src="../icones/menu.png"/></span><img src="../icones/logo.png"/></a>
</div>
<nav>
<ul>
<li><a href="../index.html"><span><img src="../icones/inicio.png"/> </span>INICIAL</a></li>
<li><a href="../paginas/artigos.html"><span> <img src="../icones/artigos.png"/> </span>ARTIGOS</a></li>
<li><a href="../paginas/multimidia.html"><span><img src="../icones/multi.png"/> </span>MULTIMÍDIA</a></li>
<li><a href="../paginas/referencias.html"><span><img src="../icones/referencias.png"/> </span>REFERÊNCIAS</a></li>
<li><a href="../paginas/sobre.html"><span><img src="../icones/sobre.png"/> </span>SOBRE</a></li>
</ul>
<img id="logo" src="../imagens/banner.png"/>
</nav>
</header>
<section id="corpo">
<header id="titulo">
<h1>Página Inicial</h1>
<h2>Teste </h2>
</header>
</section>
</div>
<footer id="final">
<span class="topo"><img src="../icones/voltar.png"/> </span>
<p><b>© 2015 - IFTM</b> <br>
Leonardo, Guilherme, Carlos V., Matheus, Victor A. e Jóse Humberto. <br>
<b>Desing por Leonardo Vilarinho.</b></p>
</footer>
</body>
</html>