2016-10-03 2 views
0

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

<!DOCTYPE html> 
<head> 

    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href= 
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= 
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= 
    "anonymous" type="text/css" /> 

    <!-- Font Awesome --> 

    <script src="https://use.fontawesome.com/926120954b.js" type="text/javascript"> 
</script> 

<!-- My CSS --> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 


</head> 

<body> 


<ul class="nav nav-tabs"> 
    <li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li> 

<!-- ****BEGIN THE DROPDOWN TAB--> 

<li role="Presentation" class="dropdown-menu"> 
    <a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
    Community <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li>item</li> 
    </ul> 
    </li> 




<!-- ***END THE DROPDOWN TAB --> 


    <li role="presentation"><a href="#">Pet Help</a></li> 
    <li role="presentation"><a href="#">Pets for Sale</a></li> 
    <li role="presentation"><a href="#">Pet Services</a></li> 

</ul> 








<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type= 
    "text/javascript"> 
</script> 
</body> 
</html> 

Моя первая попытка создания навигационного меню. (По какой-то причине я не могу представить этот вопрос без предоставления «подробностей», поэтому, пожалуйста, простите этот бессмысленный текст здесь)

+0

Я о сделанном с этим. Я задаю вопрос, он проголосовал. Извините, я новичок в этом, но если мои вопросы получат голоса, потому что я не «uber-cool», как «вы, ребята», я найду другие ресурсы. На самом деле это не проблема. – ZeroCalm

ответ

4

Я думаю, вам не хватает вызова библиотеки javascript для загрузки, которая необходима для гамбургерского навигатора. Попробуйте добавить это после того, как вы добавите ссылку JQuery (т.е. <script src="...jquery.min.js"...)

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Для получения дополнительной информации см документации страницу Bootstrap: Getting Started, а также обновленный фрагмент кода ниже.

<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= 
 
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= 
 
    "anonymous" type="text/css" /> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type= 
 
    "text/javascript"> 
 
</script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- Font Awesome --> 
 
    <script src="https://use.fontawesome.com/926120954b.js" type="text/javascript"> 
 
</script> 
 

 
<!-- My CSS -- > 
 
<link rel="stylesheet" type="text/css" href="mystyle.css">--> 
 
<!--end head: </head> start body:<body>--> 
 

 
<ul class="nav nav-tabs"> 
 
    <li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li> 
 

 
<!-- ****BEGIN THE DROPDOWN TAB--> 
 

 
<li role="Presentation" class="dropdown-menu"> 
 
    <a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
    Community <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
     <li>item</li> 
 
    </ul> 
 
    </li> 
 

 
<!-- ***END THE DROPDOWN TAB --> 
 
    <li role="presentation"><a href="#">Pet Help</a></li> 
 
    <li role="presentation"><a href="#">Pets for Sale</a></li> 
 
    <li role="presentation"><a href="#">Pet Services</a></li> 
 

 
</ul>

+0

Спасибо за ответ. – ZeroCalm

+0

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

+0

@ZeroCalm попытается поместить этот тег скрипта сразу после тега сценария для источника jQuery - он не должен выходить за пределы тега '' ... –

Смежные вопросы