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: 10 let
|
0