web-dev-qa-db-ger.com

Wie lässt sich das Superfish Dropdown-Menü ansprechen?

Ich benutze Superfish Dropdown-Menü mit Skelton-Framework. Ich wollte, dass es auch auf Handys funktioniert. Standardmäßig werden die Dropdown-Elemente angezeigt, aber der Mauszeiger bewegt sich über den Elementen darunter. Ich möchte es so haben, dass es übergeordnete Elemente darunter verschiebt. Irgendeine Lösungsmöglichkeit?

11
user1433900

Update: Siehe die Antwort von Ryan Brackett

Dropdown-Menüs funktionieren auf Mobilgeräten nicht gut. Ich würde vorschlagen, das Superfish-Menü auf Mobilgeräten auszublenden und durch etwas anderes zu ersetzen.

Ressourcen: Off canvas

http://www.lukew.com/ff/entry.asp?1569

http://www.zurb.com/playground/off-canvas-layouts

Mobile Navigationsmuster

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Wenn Sie nach einer Lösung suchen, stellen Sie sicher, dass Sie die neueste jQuery verwenden. Ich hatte einige ältere Sites, bei denen ich mit einer neueren Version von jQuery festgestellt habe, dass die Superfish-Menüs auf Mobilgeräten funktionieren.

9
Ed Charbeneau

Hier ist eine bessere Antwort

Ich konnte den gleichen HTML-Code für Superfish in ein responsives Schubladenmenü konvertieren. Die JS ist extrem einfach und das Ganze wird im Wesentlichen mit CSS erledigt. Schau es dir an und lass mich wissen, was du denkst!

// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(

  function() {
    $('.sf-menu').toggleClass("xactive");
  });



// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(

  function() {
    $(this).parent().toggleClass("xpopdrop");
  });
body {
  font-family: Arial;
  font-size: 12px;
  padding: 20px;
}
#mobnav-btn {
  display: none;
  font-size: 20px;
  font-weight: bold;
  background-color: blue;
  color: white;
  padding: 10px;
  cursor: pointer;
}
.mobnav-subarrow {
  display: none;
}
@media only screen and (max-width: 480px) {
  #mobnav-btn {
    display: block;
  }
  .mobnav-subarrow {
    display: block;
    background-color: #0f3975;
    opacity: .3;
    border-bottom: 1px solid white;
    border-top: 1px solid black;
    height: 20px;
    width: 30px;
    background-position: top left!important;
    position: absolute;
    top: 8px;
    right: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  .sf-menu {
    width: 100%!important;
    display: none;
  }
  .sf-menu.xactive {
    display: block!important;
  }
  .sf-menu li {
    float: none!important;
    display: block!important;
    width: 100%!important;
  }
  .sf-menu li a {
    float: none!important;
  }
  .sf-menu ul {
    position: static!important;
    display: none!important;
  }
  .xpopdrop ul {
    display: block!important;
  }
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" rel="stylesheet" />
<small>This is a responsive Superfish Menu by <a href="mailto:[email protected]">Ryan Brackett</a>. <br/>
    <br/>In this demo, you can drag the middle bar to see the responsive menu. I have already included the default css and js files for Superfish</small>

<br/>
<br/>
<div id="mobnav-btn">Button</div>
<ul class="sf-menu">
  <li><a href="#">Item 1</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 1.1</a>

      </li>
      <li><a href="#">Subitem 1.2</a>

      </li>
      <li><a href="#">Subitem 1.3</a>

      </li>
      <li><a href="#">Subitem 1.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 2.1</a>

      </li>
      <li><a href="#">Subitem 2.2</a>

      </li>
      <li><a href="#">Subitem 2.3</a>

      </li>
      <li><a href="#">Subitem 2.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 3.1</a>

      </li>
      <li><a href="#">Subitem 3.2</a>

      </li>
      <li><a href="#">Subitem 3.3</a>

      </li>
      <li><a href="#">Subitem 3.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 4.1</a>

      </li>
      <li><a href="#">Subitem 4.2</a>

      </li>
      <li><a href="#">Subitem 4.3</a>

      </li>
      <li><a href="#">Subitem 4.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 5</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 5.1</a>

      </li>
      <li><a href="#">Subitem 5.2</a>

      </li>
      <li><a href="#">Subitem 5.3</a>

      </li>
      <li><a href="#">Subitem 5.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 6</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 6.1</a>

      </li>
      <li><a href="#">Subitem 6.2</a>

      </li>
      <li><a href="#">Subitem 6.3</a>

      </li>
      <li><a href="#">Subitem 6.4</a>

      </li>
    </ul>
  </li>
</ul>

30
Ryan Brackett

Wie Ed betonte, scheint es problematisch, alle verschiedenen Superfish/CSS-Probleme für ein responsives Menü zu lösen.

Nachdem ich die Optionen hier und anderswo durchgesehen hatte, fand ich ein Pure CSS-Menü, das schneller und einfacher zu ändern war als Superfish und das nicht den Overhead von jquery oder Javascript hat. Es hat auch Menüs der zweiten Ebene.

Ich habe die Demo mit screenfly überprüft, um die Reaktionsfähigkeit und das mobile Layout zu überprüfen, bevor ich sie verwende. Die CSSscript.com-Version (Link oben) bietet im Gegensatz zur Codepen-Demoseite ein horizontales Layout für Handys.

 Pure Responsive CSS menu

 mobile view from screenfly, 320px wide

Der Code befindet sich in einer einzigen HTML-Datei, die Sie einfach in eine verknüpfte CSS-Datei aufteilen können. Nur zwei Medienabfragen verwalten die reaktiven Änderungen und dies auch nur mit minimalen Änderungen. Die '+' Symbole können ohne Probleme gelöscht werden.

Nur ein winziger Nachteil: Der erste Link, über den ein HTML heruntergeladen wird, hat unten ein Javascript, das offensichtliches Google Analytics-Tracking hinzufügt, das leicht entfernt werden kann und nicht mit Codepen funktioniert.

ErklärungAutor und/oder Nagy - Code von Codepen

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
        background: #212121;
        font-size:22px;
        line-height: 32px;
        color: #ffffff;
        Word-wrap:break-Word !important;
        font-family: 'Open Sans', sans-serif;
        }

h1 {
        font-size: 60px;
        text-align: center;
        color: #FFF;
}       

h3 {
        font-size: 30px;
        text-align: center;
        color: #FFF;
}

h3 a {
        color: #FFF;
}

a {
        color: #FFF;
}

h1 {
        margin-top: 100px;
        text-align:center;
        font-size:60px;
        font-family: 'Bree Serif', 'serif';
        }

#container {
        margin: 0 auto;
        max-width: 890px;
}

p {
        text-align: center;
}

#relatedContent {
  max-width: 800px;
  margin: 200px auto;
}

#relatedContent .item {
  max-width: 44%;
  padding: 3%;
  float: left;
  text-align: center;
}

#relatedContent .item a img {
  max-width: 100%;
}       

nav { 
        margin: 50px 0;
        background-color: #E64A19;
}

nav ul {
        padding:0;
        margin:0;
        list-style: none;
        position: relative;
        }
        
nav ul li {
        display:inline-block;
        background-color: #E64A19;
        }

nav a {
        display:block;
        padding:0 10px; 
        color:#FFF;
        font-size:20px;
        line-height: 60px;
        text-decoration:none;
}

nav a:hover { 
        background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
        display: none;
        position: absolute; 
        top: 60px;
}
        
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
        display:inherit;
}
        
/* Fisrt Tier Dropdown */
nav ul ul li {
        width:170px;
        float:none;
        display:list-item;
        position: relative;
}

/* Second, Third and more Tiers */
nav ul ul ul li {
        position: relative;
        top:-60px; 
        left:170px;
}

        
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Design</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Tutorials</a>
                <!-- Second Tier Drop Down -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Other</a>
                        <!-- Third Tier Drop Down -->
                        <ul>
                            <li><a href="#">Stuff</a></li>
                            <li><a href="#">Things</a></li>
                            <li><a href="#">Other Stuff</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
  <h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>
1
Mousey

Das benutze ich:

    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

$(".menu a").click(function(event){
        if($(this).parents("ul").length == 1 && !$(this).hasClass("lastClick") && isMobile)
            event.preventDefault();     

        $(".menu a").removeClass("lastClick");
        $(this).addClass("lastClick");
    });

Ersetzen Sie ".menu a" durch Ihre Navigationslinks und dieses Snippet navigiert den Benutzer nach dem zweiten Klick zu der angeklickten Site und der erste Klick zeigt ihm nur die Unterseiten.

0
Simon Schneider

Reshad: Einfach Ihre CSS wie folgt ändern:

.xpopdrop > ul {
        display: block!important;
}

Und dir wird es gut gehen.

0
user873162