Question

I was wondering how I could implement an arrow down icon next to the navigation bar text "About Me" and "Units".

In addition, how could I also make these two pages drop down menus? Below within my code I didn't make them drop down menus due to me not knowing how to make them a drop down menu.

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <title>Liam Docherty | London Web Developer &amp; GFX designer</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
<style>
        body{
          margin: 0;
          padding: 0;
        }
        header{
          height: 10vh;
          background-color: #4D5061;
        }
        nav ul{
          list-style-type: none;
          overflow: hidden;
          text-align: center;
    }
        nav ul li a{
          display: inline-block;
          padding: 3.5vh 8px 4px;
          color: white;
          text-decoration: none;
          font-size: 14pt;
          font-family:'Roboto', sans-serif;
        }
        nav ul li { 
          padding-bottom:6px;
          position:relative;
          display: inline-block;
        }
        nav ul li:after {
          content:'';
          position:absolute;
          right:50%;
          bottom:0;
          left:50%;
          height:3px;
          background-color:red;
          border-radius:9px;
          transition:all .2s;
        }
          nav ul li:hover:after {
          right:0;
          left:0;
        }
          a:hover { color:red; 
        }
        #logo{
          padding-top: 2vh;
          padding-left: 20px;
          float: left;
        }
        section{
          position:relative;
        }
        .section1{
          height:93vh;
          background-color: #FFFFFF;
          text-align: center;
        }
        .section2{
          height:93vh;
          background-color: #A59E8C;
          text-align:center;
          color:white; 
          padding-top:23vh;
        }
        .contact_section{
          height:93vh;
          background-color: grey;
        }
        .hero{
          height:750px;
        }
        h1{
          font-family:'Roboto', sans-serif;
          color: white;
        }
        .container-fluid{
          padding: 60px 50px;
        }
        .bg-grey{
          background-color: #f6f6f6;
        }
        .logo-small{
          color: #000000;
          font-size: 50px;
        }
        .logo{
          color: #000000;
          font-size: 200px;
        }
        @media screen and (max-width: 768px){
          .col-sm-4 {
          text-align: center;
          margin: 25px 0;
        }
        .fa-angle-down{
          color: #4D5061;
        }
        footer{
          height:10vh;
        }
    </style>
  <body>
        <header>
          <div id="logo">
            <img src="http://placehold.it/60x60" alt=""></div>
          <nav>
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Units</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#contact-me">Contact Me</a></li>
              </ul>
          </nav>
        </header>
        <section class="section1">


            <div class="hero"></div>

            <i class="fa fa-angle-down" style="font-size:100px;"></i>

        </section>
        <section class="section2">
            <div class="banner">
                <h1>What I can offer you</h1>
                <p> Feel free to contact me regarding any  </p>
                <div class="container-fluid text-center">
                    <div class="row">
                        <div class="col-sm-4">
                             <span class="glyphicon glyphicon-off logo-small"></span>
                             <h4>Availability</h4>
                             <p>You can expect a response with 24 hours of the sent message. </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="contact-me" class="contact_section">

        </section>
  </body>
  <footer>
  </footer>
</html>

Answer 1

您可以使用bootstrap解决该问题，然后将您的css应用于此引导代码。

<!DOCTYPE html>
<html>
<head>
    <title>Liam Docherty | London Web Developer &amp; GFX designer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt=""></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <script src="jquery-3.1.0.min.js"></script>
    <!-- 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>
</body>
</html>

请记住更改jquery文件的<script src="jquery-3.1.0.min.js"></script>。

Answer 2

看起来你正在使用Bootstrap，所以试试这个代码，我没有在你的代码中看到bootstrap javascipt文件，当然你需要链接和jQuery。

  <ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

如果你还想不通，请告诉我。

Answer 3

测试和工作

这是您的解决方案：

<!DOCTYPE html>
<html lang="en">

<html>

<head>
    <title>Liam Docherty | London Web Developer &amp; GFX designer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    header {
        height: 10vh;
        background-color: #4D5061;
    }
    nav ul {
        list-style-type: none;
        text-align: center;
    }
    nav ul li {
        display: inline-block;
    }
    nav ul li a {
        display: inline-block;
        padding: 3.5vh 8px 4px;
        color: white;
        text-decoration: none;
        font-size: 14pt;
        font-family: 'Roboto', sans-serif;
    }
    nav ul li:hover a {
        text-decoration: none;
        color: red;
        border-bottom: 1px solid red;
    }
    #logo {
        padding-top: 2vh;
        padding-left: 20px;
        float: left;
    }
    section {
        position: relative;
    }
    .section1 {
        height: 93vh;
        background-color: #FFFFFF;
        text-align: center;
    }
    .section2 {
        height: 93vh;
        background-color: #A59E8C;
        text-align: center;
        color: white;
        padding-top: 23vh;
    }
    .contact_section {
        height: 93vh;
        background-color: grey;
    }
    .hero {
        height: 750px;
    }
    h1 {
        font-family: 'Roboto', sans-serif;
        color: white;
    }
    .container-fluid {
        padding: 60px 50px;
    }
    .bg-grey {
        background-color: #f6f6f6;
    }
    .logo-small {
        color: #000000;
        font-size: 50px;
    }
    .logo {
        color: #000000;
        font-size: 200px;
    }
    @media screen and (max-width: 768px) {
        .col-sm-4 {
            text-align: center;
            margin: 25px 0;
        }
        .fa-angle-down {
            color: #4D5061;
        }
        footer {
            height: 10vh;
        }
</style>

<body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                            <li><a href="#">Home</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a>
                                    </li>
                                    <li><a href="#">Another action</a>
                                    </li>
                                    <li><a href="#">Something else here</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a>
                                    </li>
                                    <li><a href="#">Another action</a>
                                    </li>
                                    <li><a href="#">Something else here</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a>
                            </li>
                            <li><a href="#contact-me">Contact Me</a>
                            </li>
                        </ul>
                      </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
        </nav>


    <section class="section1">


        <div class="hero"></div>

        <i class="fa fa-angle-down" style="font-size:100px;"></i>

    </section>
    <section class="section2">
        <div class="banner">
            <h1>What I can offer you</h1>
            <p> Feel free to contact me regarding any </p>
            <div class="container-fluid text-center">
                <div class="row">
                    <div class="col-sm-4">
                        <span class="glyphicon glyphicon-off logo-small"></span>
                        <h4>Availability</h4>
                        <p>You can expect a response with 24 hours of the sent message. </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contact-me" class="contact_section">

    </section>
    <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
<footer>
</footer>
</html>

你错过了javascript文件和一些代码...... 下次参考http://getbootstrap.com并尝试阅读所有文档。那里的一切都记录得非常好。

另外，如果我可以建议你，请使用外部css文件存储你的风格......

How can I add an arrow down icon next to nav bar and make pages drop down menu?

3 个答案: