http://wp-danmark.dk/forum/tags/mobil-menu WordPress DK Forum Tag: mobil menu - Recent Posts da-DK Wed, 23 Sep 2026 10:04:01 +0000 http://bbpress.org/?v=1.0.1 q http://wp-danmark.dk/forum/search.php http://wp-danmark.dk/forum/topic/mobil-menu#post-68497 fre, 06 okt 2017 11:44:27 +0000 MortenMoeller 68497@http://wp-danmark.dk/forum/ <p>Hej</p> <p>Er ved at lave så min mobilmenu virker i wordpress har sat det hele op med jquery har kilderne vist i vis kildekode i browseren så det skulle være på plads.</p> <p>Vil så høre om hvor det går galt, har før lavet en mobil menu men ikke til Wordpress.<br /> Ved der er plugins til sådan noget, men det er altså sjovere at have i hænderne, selvom jeg ved jeg spørger om hjælp.<br /> Men vil gerne lære det ;o)</p> <p>Her er min jquery:<br /> $(function(){<br /> $('#menu-topmenu').prepend('&lt;div id="menu-button"&gt;Menu&lt;/div&gt;');<br /> $( '#menu-button' ).click(function(event){<br /> event.preventDefault();<br /> $( "ul" ).toggleClass("open");<br /> });<br /> });</p> <p>Her er min css:<br /> @media all and (max-width: 800px){<br /> #menu-button {<br /> padding:20px;<br /> font-weight:bold;<br /> }<br /> #menu-topmenu &gt; ul {<br /> display:none;<br /> }<br /> #menu-topmenu &gt; ul.open {<br /> display: block;<br /> border-top: 1px solid rgba(0, 0, 0, 0.1);<br /> }<br /> #menu-topmenu {<br /> background: #333;<br /> background: -moz-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));<br /> background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: -o-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: -ms-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: linear-gradient(to bottom, #333 0%, #CCC 100%);<br /> color:#FFF;<br /> cursor:pointer;<br /> width:100%;<br /> }<br /> #menu-topmenu &gt; ul &gt; li &gt; ul {<br /> padding:0px 0px 0px 20px;<br /> background-color:#ff6600;<br /> font-weight:normal;<br /> list-style:none;<br /> display: block;<br /> }<br /> #menu-topmenu &gt; ul &gt; li {<br /> color:#FFF;<br /> font-weight:bold;<br /> list-style:none;<br /> font-family: 'Open Sans', Helvetica, sans-serif;<br /> background: #333;<br /> background: -moz-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));<br /> background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: -o-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: -ms-linear-gradient(top, #333 0%, #CCC 100%);<br /> background: linear-gradient(to bottom, #333 0%, #CCC 100%);<br /> width:100%;<br /> }<br /> #menu-topmenu ul &gt; li{<br /> padding:0px 0px 0px 0px;<br /> text-indent: 10px;<br /> line-height:46px;<br /> }<br /> #menu-topmenu #menu-button::after {<br /> display: block;<br /> content: '';<br /> position: absolute;<br /> height: 3px;<br /> width: 22px;<br /> border-top: 2px solid #FFF;<br /> border-bottom: 2px solid #FFF;<br /> right: 25px;<br /> top: 22px;<br /> }<br /> #menu-topmenu #menu-button::before {<br /> display: block;<br /> content: '';<br /> position: absolute;<br /> height: 3px;<br /> width: 22px;<br /> border-top: 2px solid #FFF;<br /> right: 25px;<br /> top: 32px;<br /> }</p> <p>Og alt bliver vist igennem min function fil:<br /> function kis_add_styles(){<br /> wp_enqueue_style('style', get_stylesheet_uri());<br /> wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');<br /> wp_enqueue_style('jquery', 'http://code.jquery.com/jquery.js');<br /> wp_enqueue_style('mobil_menu', get_template_directory_uri() . '/css/mobil_menu.js');<br /> }<br /> add_action('wp_enqueue_scripts', 'kis_add_styles');</p> <p>Håber der er en der kan hjælpe med at finde problemet.</p> <p>Med venlig hilsen<br /> Morten </p>