2017-01-26 9 views
2

Я новичок в семантический-щ и у меня возник проблемы создание ссылки HTML для пункта меню, ниже мой тестовый код:Как создать ссылку HTML в семантическом-интерфейсе меню

<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> 

Что я получаю отображаемая: Главная Продукция> Google ZDNet

То, что я хочу, это Google и ZDNet, которые будут отображаться в качестве наименований продукции:

Главная | Продукция |
                      | Google       |
                      | ZDNet         |

Может ли кто-нибудь сказать мне, что мне нужно сделать для моего кода, чтобы достичь этого?

Благодаря

ответ

1

Убедитесь, что вы включены jQuery и semantic.min.js библиотеки в <head> разделе (JQuery первый!).

<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

Я пробовал предлагаемые изменения, и я все еще не могу отображать элементы в раскрывающемся меню, они все еще отображаются в главном меню. – user3189706

+1

https://plnkr.co/edit/jmP4kYTYwmxoTAlWe4Ju?p=preview надеюсь, что это поможет – Eugene

+0

Спасибо, что работает сейчас. Похоже, что размещение выпадающего скрипта вне заголовка является ключевым, а также jquery. – user3189706