2017-01-26 2 views
2

Ich bin neu in semantisch-ui und ich habe Probleme beim Erstellen einen HTML-Link für einen Menüeintrag erstellen, unten ist mein Testcode:Wie kann ich einen HTML-Link in einer semantischen-ui-Menü

<div class="ui blue borderless main menu"> 
<a href="#" class="blue item" data-vivaldi-spatnav-clickable="1"> 
    Home 
</a> 
<a href="#" class="ui floated dropdown item" data-vivaldi-spatnav-clickable="1"> 
    Products 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <a class="item" href="http://www.google.com">Google</a> 
     <a class="item" href="http://www.zdnet.com">Zdnet</a> 
    </div> 
</a> 

Was bekomme ich angezeigt ist: Home Produkte> Google Zdnet

Was ich will, ist Google und Zdnet als Elemente der Produkte angezeigt werden:

Home |
                      | Google       |
                      | Zdnet         |

Kann mir jemand sagen, was ich mit meinem Code tun muss, um dies zu erreichen?

Dank

Antwort

1

Stellen Sie sicher, enthalten Sie jQuery und semantic.min.js Bibliotheken in <head> Abschnitt (jQuery erste!).

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> 
</head> 

<body> 
<div class="ui blue borderless main menu"> 
    <a href="#" class="blue item" data-vivaldi-spatnav-clickable="1">Home</a> 
    <div class="ui dropdown item" data-vivaldi-spatnav-clickable="1"> 
    Products 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <a class="item" href="http://www.google.com">Google</a> 
     <a class="item" href="http://www.zdnet.com">Zdnet</a> 
    </div> 
</div> 
</div> 
<script> 
    $('.ui.dropdown').dropdown(); 
</script> 
</body> 
</html> 
+0

Ich habe versucht, Ihre vorgeschlagenen Änderungen und ich kann immer noch nicht die Elemente im Dropdown-Menü anzeigen, sie werden immer noch im Hauptmenü angezeigt. – user3189706

+1

https://plnkr.co/edit/jmP4kYTYwmxoTAlWe4Ju?p=preview hoffe, das hilft – Eugene

+0

Danke, es funktioniert jetzt mir. Es scheint, dass das Setzen eines Dropdown-Skripts außerhalb der Kopfzeile ebenso wichtig ist wie die JQuery. – user3189706

Verwandte Themen