Avatar billede Morten Professor
06. oktober 2017 - 10:26 Der er 16 kommentarer og
1 løsning

mobil menu selv programmering

Hej Eksperter

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.

Vil så høre om hvor det går galt, har før lavet en mobil menu men ikke til Wordpress.
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.
Men vil gerne lære det ;o)

Her er min jquery:
$(function(){
    $('#menu-topmenu').prepend('<div id="menu-button">Menu</div>');
  $( '#menu-button' ).click(function(event){
      event.preventDefault();
        $( "ul" ).toggleClass("open");
  });
});

Her er min css:
@media all and (max-width: 800px){
#menu-button {
    padding:20px;
    font-weight:bold;
}
#menu-topmenu > ul {
    display:none;
}
#menu-topmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#menu-topmenu {
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    color:#FFF;
    cursor:pointer;
    width:100%;
}
#menu-topmenu > ul > li > ul {
    padding:0px 0px 0px 20px;
    background-color:#ff6600;
    font-weight:normal;
    list-style:none;
    display: block;
}
#menu-topmenu > ul > li {
    color:#FFF;
    font-weight:bold;
    list-style:none;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    width:100%;
}
#menu-topmenu ul > li{
    padding:0px 0px 0px 0px;
    text-indent: 10px;
    line-height:46px;
}
#menu-topmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    right: 25px;
    top: 22px;
}
#menu-topmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    right: 25px;
    top: 32px;
}

Og alt bliver vist igennem min function fil:
function kis_add_styles(){
  wp_enqueue_style('style', get_stylesheet_uri());
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
  wp_enqueue_style('mobil_menu', get_template_directory_uri() . '/css/mobil_menu.js');
  wp_enqueue_style('jquery', 'http://code.jquery.com/jquery.js');
}
add_action('wp_enqueue_scripts', 'kis_add_styles');

Håber der er en der kan hjælpe med at finde problemet.

Med venlig hilsen
Morten
Avatar billede keysersoze Guru
06. oktober 2017 - 12:22 #1
Hvad virker ikke - hvad får du af fejl?
Avatar billede Morten Professor
06. oktober 2017 - 12:52 #2
Der kommer ikke nogen fejl umiddelbart men kan see i google chorme:
JQMIGRATE: Migrate is installed, version 1.4.1
(index):143 Uncaught TypeError: $ is not a function
    at (index):143

Men fejlen er at den der mobil menu hvor der bare står menu ikke kommer frem.
Holder jeg musen over menuen viser den pointer men der sker ikke noget.
Og toggle virker ikke.
Avatar billede Morten Professor
06. oktober 2017 - 13:00 #3
Har prøvet at sætte mine link statisk på header.php
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="\css\mobil_menu.js"></script>
Men virkede heller ikke,
men den kommer i hvert fald ikke med fejl efter jeg gjorde sådan.
Avatar billede Morten Professor
06. oktober 2017 - 13:04 #4
Avatar billede Morten Professor
06. oktober 2017 - 13:08 #5
Nu virker det næsten med toggle virker ikke
Og menuen bliver heletiden vist, altså den almindelige menu + mobil menu
Avatar billede keysersoze Guru
06. oktober 2017 - 15:37 #6
Så længe du ikke har en document ready på din js vil den blive eksekveret så snart filen er loaded og det gør den inden du inkluderer jquery - så benyt document ready eller hold styr på din rækkefølge.

Så vidt jeg kan se er der ikke noget sted du skjuler menu-button og så vil den selvfølgelig altid blive vist.

Medmindre du har udeladt noget kode er der ingen ul-elementer at toggle class på - men har du det så prøv at debug og se om din event bliver kørt eller ej.

Noget helt andet er at det virker som en lidt forkert tilgang at lave en mobil menu på - der er ikke umiddelbart grund til at bruge js til at tilføje ekstra elementer, hele den del skal bare styres via CSS.
Avatar billede Morten Professor
06. oktober 2017 - 16:38 #7
var mobilmenu =
{
    ready:function(){
$(function(){
    $('#menu-topmenu').prepend('<div id="menu-button">Menu</div>');
  $( '#menu-button' ).click(function(event){
      event.preventDefault();
        $( "ul" ).toggleClass("open");
  });
});
}}
$(document).ready(mobilmenu.ready);

Har lavet nogen rettelser som du skrev om men virker ikke desværre:

@media all and (max-width: 800px){
#menu-button {
    position: relative;
    padding:10px;
    font-weight:bold;
}
#menu-topmenu > ul {
    display:none;
}
#menu-topmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
#menu-topmenu {
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    color:#FFF;
    cursor:pointer;
    width:100%;
}
#menu-topmenu > ul > li > ul {
    padding:0px 0px 0px 20px;
    background-color:#ff6600;
    font-weight:normal;
    list-style:none;
    display: block;
}
#menu-topmenu > ul > li {
    color:#FFF;
    font-weight:bold;
    list-style:none;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    width:100%;
}
#menu-topmenu > ul > li{
    padding:0px 0px 0px 0px;
    text-indent: 10px;
    line-height:46px;
}
#menu-topmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    right: 25px;
    top: 22px;
}
#menu-topmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    right: 25px;
    top: 32px;
}
Avatar billede keysersoze Guru
06. oktober 2017 - 17:38 #8
Enten må du medsende et link eller også må du fortælle hvad der sker/ikke sker og hvad der evt fejler.
Avatar billede Morten Professor
06. oktober 2017 - 19:53 #9
ok så virker toggle min min menu den der vises i disktop bliver vist sammen med min mobil menu.
Og kan kun toggle med en under menu.

Her er alt kode til menu og mobil menu:

nav  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5f5e5e;
}

nav ul ul {
    position:fixed;
    display: none;
}

nav ul > li:hover > ul {
    display:  inline-block;
    z-index: 1;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover:not(.active) {
    background-color: #555;
    text-decoration:none;
    color:#FFF;
}

nav .active {
    background-color: #4CAF50;
}
@media all and (min-width: 800px) {
.menu-hide {
    display: none;
}
}
@media all and (max-width: 800px){
#menu-button {
    position: relative;
    padding:10px;
    font-weight:bold;
    width: 100%;
}
#menu-topmenu ul {
    display:none;
}
#menu-topmenu ul.open {
  display: block;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}
#menu-topmenu {
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    color:#FFF;
    cursor:pointer;
    width:100%;
}
#menu-topmenu ul > li > ul {
    padding:0px 0px 0px 20px;
    background-color:#ff6600;
    font-weight:normal;
    list-style:none;
    display: block;
        width: 100%;
}
#menu-topmenu > ul > li {
    color:#FFF;
    font-weight:bold;
    list-style:none;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    width:100%;
}
#menu-topmenu > ul > li{
    padding:0px 0px 0px 0px;
    text-indent: 10px;
    line-height:46px;
    width: 100%;
}
#menu-topmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    right: 25px;
    top: 22px;
}
#menu-topmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    right: 25px;
    top: 32px;
}

Her er der et link: http://test.morticms.dk/wordpress/
og så skal du bare lige gøre browseren mindre så mobil menuen kommer frem.
Avatar billede keysersoze Guru
06. oktober 2017 - 21:52 #10
Det er klart bedre at benytte developer toolbaren end at resize browseren - ellers bliver det lidt op ad bakke at debugge. Men virker det så efter hensigten nu eller?
Avatar billede Morten Professor
06. oktober 2017 - 21:54 #11
Nej ikke endnu man kan se de menu punkter som man ser i menuen i disktop de skulle helst være væk og kun komme frem når man trykker
Avatar billede keysersoze Guru
06. oktober 2017 - 22:16 #12
Sæt display none på de elementer der skal skjules - og toggle dem på din click-event.

Der findes en masse frameworks, fx bootstrap, eller codepens med færdige eksempler - er der nogen grund til at du ikke følger dem? Set udefra gør du det lige nu svært for dig selv og samtidig ender du op med invalid markup (div i en ul).
Avatar billede Morten Professor
06. oktober 2017 - 22:32 #13
hmm kan du komme med et godt eks. det er fordi det skal kunne bruges i wordpress og det som jeg laver nu virker slet ikke, kan godt få det til at virke på selvkodet side. men ikke i wordpress.
Det med bootstrap ved jeg er rigtig smart, men class kan jeg ikke få til at passe sammen, med hvad wordpress har givet i id og class for menubaren
Wordpress har id #menu-topmenu og class .menu
Så jeg ved ikke hvordan jeg får det til at passe sammen kan ikke ændre det i wordpress da det er funktioner der er lavet.
Det er hvad jeg i hvert fald tror :oP
Wordpress er ret nyt for mig.
Avatar billede Morten Professor
06. oktober 2017 - 22:41 #14
Kan det passe det er sådan noget jeg skal
https://www.pattonwebz.com/wordpress-custom/bootstrap-wordpress-responsive-menu/
for så ser det hele lidt nemmere ud :oP
Forstår godt fremgangsmåden, håber bare det kommer til at virke :oD
Idag har jeg brugt en masse tid på noget som ikke vil virke og det er jeg godt træt af.
Men ja så har man også lært det :oD
Avatar billede keysersoze Guru
06. oktober 2017 - 22:47 #15
Jeg sagde heller ikke at du nødvendigvis skulle bruge bootstrap - men det er forholdsvis lige til at kopiere deres markup og css fx vha browserens developer toolbar.

Du kan tage fuld kontrol over markup i wordpress - alt andet ville være håbløst - så du behøver ikke bruge js til at tilføje ekstra elementer eller være bange for at codepens, frameworks eller dit selvkode ikke passer ind. Men det kræver selvfølgelig tid at sætte sig ind i WP som med ethvert andet CMS.
Avatar billede Morten Professor
06. oktober 2017 - 22:53 #16
Helt sikker har lige taget et kursus i det og kan godt se frem gang måden i det.
Jeg må prøve mig frem ;o)

tak for hjælpen, og din tid til lige at få nogen ting på plads.

Jeg må hellere lukke tråden for nu.
Avatar billede a3-seo.dk Ekspert
11. oktober 2017 - 13:55 #17
Alt det bøvl, du kunne blot tage "max mega menu" i den gratis udgave, så var den potte ude
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester