| Autor | Zpráva | ||
|---|---|---|---|
| Michal Sebek Profil |
Mám responzivní menu a při PC verzi zasahuje na druhý řádek. Jak se toho mám zbavit?
Kód: index.html: <!DOCTYPE html>
<html>
<head>
<title>Zkouška menu</title>
<link rel="stylesheet" href="webdata/css/fonts.css" type="text/css">
<link rel="stylesheet" href="webdata/font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="webdata/css/style.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="webdata/js/menu.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="menu">
<ul>
<li><a href='index.html' class="actual"><i class="fa fa-home fa-lg"></i> Home</a></li>
<li><a href='#about-me'><i class="fa fa-users"></i> O nás</a></li>
<li><a href='#gallery'>Gallery</a></li>
<li><a href='#blog'>Blog</a></li>
<li><a href='#links'>Links</a></li>
<li><a href='#sitemap'>Sitemap</a></li>
</ul>
</div>
</body>
</html>style.css: .menu {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
font-size: 1em;
display:block;
position:relative;
width:100%;
padding:0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.menu a {
color:#ebebeb;
text-decoration:none;
}
.menu-main-list, .menu .menu-main-list li {
margin:0px;
padding:0px;
}
.menu ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
.menu-main-list li {
display:inline;
padding:0px;
margin:0px !important;
}
.menu-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.menu-button:hover {
cursor:pointer;
}
.menu-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.menu-toggled ul li {
display:block;
margin:0 auto !important;
}
.menu-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
text-shadow:1px 1px 1px #333333;
background-color:#444444;
border-left:1px solid #555555;
}
.menu-main-list li a:hover {
background:orange;
}
.menu-main-list li:first-child a {
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.menu-main-list li:last-child a {
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.menu-toggled {
width:100%;
background-color:#555555;
min-height:36px;
border-radius:6px;
}
.menu-toggled-controls {
display:block;
height:36px;
color:white;
text-align:left;
position:relative;
border-radius:6px;
}
.menu-toggled-title {
position:relative;
top:9px;
left:15px;
color:white;
text-shadow:1px 1px 1px black;
}
.menu-button {
display:block;
position:absolute;
right:15px;
top:8px;
}
.menu-button span {
display:block;
margin-top:4px;
height:2px;
background:white;
width:24px;
}
.menu-toggled ul li a {
display:block;
width:100%;
background-color:#555555;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #333333;
border-top:1px solid #777777;
text-shadow:1px 1px 1px #333333;
}
.menu-toggled ul li a:active {
background:darkorange;
border-bottom:1px solid #444444;
border-top:1px solid #444444;
}
.menu .actual {
background:darkorange;
}menu.js: function responsiveMobileMenu() {
$('.menu').each(function() {
$(this).children('ul').addClass('menu-main-list');
var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
} else {
$(this).css('width' , $width*1.05+'px');
}
});
}
function getMobileMenu() {
$('.menu').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
} else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.menu-main-list').html();
var $menucontrols ="<div class='menu-toggled-controls'><div class='menu-toggled-title'>" + menutitle + "</div><div class='menu-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='menu-toggled menu-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
function adaptMenu() {
$('.menu').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.menu-main-list').hide(0);
$(this).children('.menu-toggled').show(0);
} else {
$(this).children('.menu-main-list').show(0);
$(this).children('.menu-toggled').hide(0);
}
});
}
$(function() {
responsiveMobileMenu();
getMobileMenu();
adaptMenu();
$('.menu-toggled, .menu-toggled .menu-button').click(function(){
if ( $(this).is(".menu-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("menu-closed");
} else {
$(this).find('ul').stop().hide(300);
$(this).addClass("menu-closed");
}
});
});
$(window).resize(function() {
adaptMenu();
}); |
||
| Michal Sebek Profil |
#2 · Zasláno: 15. 5. 2015, 18:49:28
Tak problém vyřešen, v javascriptu jsem místo
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
} else {
$(this).css('width' , $width*1.05+'px');
}if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.4+'px');
} else {
$(this).css('width' , $width*1.4+'px');
} |
||
| Michal Sebek Profil |
#3 · Zasláno: 17. 5. 2015, 12:39:04 · Upravil/a: Michal Sebek
Ale mám další problém. Když do menu dám o jednu položku víc, tak to dává mobilní menu i na PC. A když to číslo zvednu, tak to nepomáhá. Co mám dělat?
(Ale to se týká spíš JS) |
||
|
Časová prodleva: 11 let
|
|||
0