那些遇到过的问题

标签: navbar

jQuery.load加载HTML文件

在此之前我从未使用过jQuery,但我会解释我正在尝试做什么.

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>

<!--    <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
            <!-- This is my problem -->
        <script>
                $('#navbar').load('./navbar.html');
        </script>
        <noscript>
            <h1>Please enable Javascript!</h1>
        </noscript>

        <div id="container">
                <!-- Content Here -->
        </div>

    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

navbar.html

<div id="navbar">
        <li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" …
Run Code Online (Sandbox Code Playgroud)

html jquery navbar web

Yha*_*oer
2017 05-23
2
推荐指数
1
解决办法
5万
查看次数

导航菜单位于中心

我希望我的导航菜单在中心我尝试了在另一个类似的问题中发布的方法,但没有为我工作..这里是小提琴

这是代码HTML:

<div id="nav">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

    #nav {
    background:#111212;
    width: 100%;
    height:55px;
    float: left;
    margin:0 auto;
    padding:0;
    font-size:125%;
}
#nav ul{
    list-style: none;
    width: 80%;
    margin: 0 auto;
    padding:0;
}

#nav li {
    float:left;
}

#nav li a {
    display:inline-block;
    padding:17.5px 15px 17.5px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #438181; 
}

#nav li a:hover {
    color:#438181;
    background-color:#fff; 
}
Run Code Online (Sandbox Code Playgroud)

html css navbar

Sag*_*uhe
lucky-day
2
推荐指数
1
解决办法
85
查看次数

如何在 ASP.NET 中的 Layout.CSHTML 中创建下拉导航栏菜单项

我是 ASP.NET 的新手，我想弄清楚如何创建具有下拉功能的导航栏菜单项。我特别使用这个主题。在他们的示例代码中，他们演示了下拉功能，但在我的默认 MVC 应用程序中，我使用 _Layout.cshtml 创建我的导航栏。我很难找出正确的语法。

我已经section在我的 Index.cshtml 页面中实现了s，我希望第一个导航栏菜单项下拉菜单相应地转到。我怎样才能做到这一点？

索引.cshtml

<section id="item 1">...</section>
<section id="item 2">...</section>
<section id="item 3">...</section>
Run Code Online (Sandbox Code Playgroud)

_Layout.cshtml

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("My Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @*<li>@Html.ActionLink("Index", "Index", "Home")</li>*@
                <li class="dropdown">
                    <a class="dropdown-toggle" role="button" aria-expanded="false" data-toggled="dropdown">@Html.ActionLink("Home", "Index", "Home")</a> …
Run Code Online (Sandbox Code Playgroud)

html css asp.net asp.net-mvc navbar

Mat*_*hew
2015 09-06
2
推荐指数
1
解决办法
3万
查看次数

Bootstrap 下拉列表位于导航栏下方

这是下拉菜单出现时的样子。 在此处输入图片说明

导航栏：

     <nav class="navbar navbar-default" role="navigation">

                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Categories</a>
...
Run Code Online (Sandbox Code Playgroud)

落下：

<ul class="dropdown-menu">

            <li>
               <div class="panel panel-default">
                 <div class="panel-body">
                  <div class="panel-info">
                    <p><strong>Black Dress</strong></p>
                      <p>Each Price :&nbsp;<strong>Rs. 500.00</strong></p>
                      <p>Quantity :&nbsp; <input type="number" value="3"/> 
                    <a href="#"><span class="glyphicon glyphicon-refresh"></span></p>
                                   ....
Run Code Online (Sandbox Code Playgroud)

尝试定位（position:relative）。但无法获得所需的结果。（下拉nav-bar）。提前致谢。

这是我工作的一个例子。

html css navbar drop-down-menu twitter-bootstrap-3

Ste*_*lva
2015 12-19
2
推荐指数
1
解决办法
1928
查看次数

如何更改打开的引导程序下拉列表的背景颜色 - Bootstrap 4

如何更改打开的引导程序下拉选项的背景颜色。这是代码：

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar6">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a href="#" class="navbar-brand">Title </a>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar6">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">About<span class="sr-only">Home</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Design</a>
          <a class="dropdown-item" href="#">Development</a>
          <a class="dropdown-item" href="#">Consulting</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

在引导程序 3 中，我在以下帮助下对其进行了更改：

.navbar-default .navbar-nav > .open > a,
.navbar-default …
Run Code Online (Sandbox Code Playgroud)

css toggle navbar twitter-bootstrap dropdown

Pav*_*rov
lucky-day
2
推荐指数
1
解决办法
9775
查看次数

导航栏，标题在中心，按钮在右边

所以我试图创建一个导航栏，中间有一个标题，一个按钮出现在右侧。如您所见，当我尝试执行此操作时，按钮出现在下一行和 div 之外：

小提琴

.title-bar {
  background-color: #48A6B8;
  font-style: italic;
  margin-bottom: 3%;
  color: #fff;
}

.title {
  text-align: center;
  font-size: 36px;
  line-height: 180%;
}

.buts {
  float: right;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="title-bar">
  <div class="title">Title</div>
  <div class="button">
    <button class="buts">Whats Up</button>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

display:inline-block 似乎删除了文本的居中，所以我不能使用它......

提前致谢！

html css navbar display

idu*_*ude
2017 08-11
2
推荐指数
1
解决办法
2411
查看次数

在 R 闪亮中更改 navbarPage 菜单栏的背景颜色

在 R Shiny 中，我想更改导航栏菜单的背景颜色。我想将菜单栏上各处的颜色（包括将鼠标悬停在按钮上方或处于非活动状态等时的按钮颜色）更改为一种颜色（黑色），但字体除外。但是，我不希望更改任何其他默认颜色，例如页面主要部分的背景颜色。我试图通过创建一个 CSS 文件来做到这一点，如下所示：

body, 
#selector, 
.container, 
.navbar-background { background: #000000; }
Run Code Online (Sandbox Code Playgroud)

我还尝试了许多其他组合和参数，但似乎没有任何效果。控制导航栏菜单栏背景颜色的CSS文件中的参数是什么？

请注意以下答案：如何更改 Zebble 中的 navBarPage 标题背景？没有为我工作。

css r colors navbar shiny

qan*_*nda
2018 05-12
2
推荐指数
1
解决办法
3661
查看次数

bootstrap 4 导航栏在左侧和右侧有填充

我不确定我在这里缺少什么，我知道我可以添加 CSS 以从父 div 中删除填充，但我认为引导程序会使导航栏成为页面的全宽？这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Contact</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="container-fluid" id="outer">
    <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-secondary">
        <a class="navbar-brand" href="#">
          <img src="\movieTheater.jpg" width="10%" height="10%" alt="">
          Movie Theater
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="home.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li> …
Run Code Online (Sandbox Code Playgroud)

html navbar bootstrap-4

Jro*_*2k9
2020 03-29
2
推荐指数
1
解决办法
3901
查看次数

如何使用引导导航栏和下拉菜单（角度7）？

我尝试这样做，但是当我单击Dropdown linknemu时，什么也没有发生。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" routerLink="dashboard">dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="calendar">calendar</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="manager">manager</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
        </ul>
        <!--ul class="navbar-nav navbar-right">

        </ul-->
    </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

编辑：

我使用https://ng-bootstrap.github.io/#/components/datepicker/overview和navbar不存在。

navbar bootstrap-4 angular

sgr*_*lon
2019 01-15
2
推荐指数
1
解决办法
5469
查看次数

Laravel Bootstrap 导航栏折叠

我正在 Laravel 中开发一个应用程序，当我按下它时，我的折叠按钮不起作用，控制台显示“TypeError: can't convert config to string 3 app.js:3449:52

我的 package.json 是：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.4.1",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1", …
Run Code Online (Sandbox Code Playgroud)

collapse navbar laravel

ric*_*rdo
2020 11-10
2
推荐指数
1
解决办法
1343
查看次数

标签 统计

navbar ×10

css ×6

html ×6

bootstrap-4 ×2

angular ×1

asp.net ×1

asp.net-mvc ×1

collapse ×1

colors ×1

display ×1

drop-down-menu ×1

dropdown ×1

jquery ×1

laravel ×1

r ×1

shiny ×1

toggle ×1

twitter-bootstrap ×1

twitter-bootstrap-3 ×1

web ×1