3 Replies Latest reply on Mar 16, 2016 2:07 PM by Nancy OShea

    css driven navigation with dropdown

    Irish-Phoenix Level 1

      I am trying to build a css driven navigation. I have it working approx 85%, the drop down comes down the main nav all works with the arrow above the links.. my problem is, when I try and mouse over the dropdown, it disappears, I can hit the links. Also when I can hit the links, the arrows from the main nav appear and I don't want those. Can someone help me clean this up? Here is my code..

       

       

      <style>

      /* menu */

      #menu,

      #menu li ul {

          list-style: none;

      }

      #menu{

        float:right;

        padding:10px 0 0 25px;

        width:595px;

        height:65px;

        margin:35px 0 0 0;

        background:url(images/menu_bg.png) no-repeat bottom left;

      }

      #menu li{

        float:left;

        padding:0px 0 0px 0;

      }

      #menu li.space{width:14px; height:10px; float:left; text-indent:-9999px;}

      #menu li.space:hover{ background:none}

      #menu li:hover,#menu li.active {background:url(images/down_arrow.png) no-repeat top center; position:relative; top:-4px; padding:6px 0 0 0;}

      #menu li a{

        float:left;

        padding:10px 17px 0px 12px;

        display:block;

        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

        text-transform:uppercase;

        line-height:24px;

        color:#b5b3b3;

        font-size:14px;

        font-weight:bold;

      }

      #menu li a:hover, #menu li a.active{

        float:left;

        color:#e68322;

        padding:10px 17px 0px 12px;

        display:block;

        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

        line-height:24px;

      }

       

       

      /* Sub menu */

      #menu li ul {

         position: absolute;

         left: 0px;

         top: 30px;

         display:none;

         z-index: -1;

        background: #f09d28;

      }

      #menu li ul li a {

          color: #000;

        padding:5px;

          width:168px;

      }

      #menu li ul li:hover a {

          color:#94A6BF;

        padding:5px;

          width:168px;

      }

      #menu li:hover ul {

          display: block;

      }

      /* end menu */

      </style>

       

      <div id="menu">

                      <li class="active"><a class="active" href="index.html">Home </a></li>

                      <li class="space">|</li>

                      <li><a href="aboutus.html">About</a></li>

                      <li class="space">|</li>

                      <li><a href="services.html">Services</a></li>

                      <li class="space">|</li>

                      <li><a href="faq.html">Systems</a>

                      <ul>

                      <li><a href="#">Hellenico</a></li>

                      <li><a href="#">Genere</a></li>

                      <li><a href="#">Indulgentia</a></li>

                      </ul>

                      </li>

                      <li class="space">|</li>

                      <li><a href="folio.html">Projects</a></li>

                      <li class="space">|</li>

                      <li><a href="contact.html">Contact</a></li>

                  </div>      

       

      This is my last hurdle for this.. I can't seem to figure out the issues with it.

        • 1. Re: css driven navigation with dropdown
          Nancy OShea Adobe Community Professional & MVP

          Mouseover (hover) drop-menus don't do anything on touchscreens.  For this reason, it's way better to use onClick drop-downs so you're not alienating a large segment of users who don't have a mouse. 

           

          But to answer your CSS question, try this:

          CSS Menu - JSFiddle

           

           

          Nancy O.

          • 2. Re: css driven navigation with dropdown
            Irish-Phoenix Level 1

            Thank you. I can now mouse over it. But it is still taking on the traits of the main navigation. I am using images in the nav, for the bg and an arrow that goes over the top of the link you mouse over. The sub nav is also changing the text like the main nav and moving it. How can i fix it. I modified your code into what I'm doing in my code. It's now cosmetic fixes I need to improve upon. How to make the subnav not take on main nav attributes. Here is the code I modified:

             

             

            <style>

            /* menu */

            #menu{

              float:right;

              padding:10px 0 0 25px;

              width:595px;

              height:65px;

              margin:35px 0 0 0;

              background:url(images/menu_bg.png) no-repeat bottom left;

            }

            #menu ul {

                margin: 0;

                padding: 0

            }

            #menu li {

                list-style: none;

                font-size: 12px;

                float: left;

                text-align: center;

            }

            #menu li.space{width:14px; height:10px; float:left; text-indent:-9999px;}

            #menu li.space:hover{ background:none}

            #menu li:hover,#menu li.active {background:url(images/down_arrow.png) no-repeat top center; position:relative; top:-4px; padding:6px 0 0 0;}

            #menu li a{

              float:left;

              padding:10px 17px 0px 12px;

              display:block;

              font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

              text-transform:uppercase;

              line-height:24px;

              color:#b5b3b3;

              font-size:14px;

              font-weight:bold;

            }

            #menu li a:hover, #menu li a.active{

              float:left;

              color:#e68322;

              padding:10px 17px 0px 12px;

              display:block;

              font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

              line-height:24px;

            }

             

             

            /* Sub menu */

            #menu li ul {

               display: none;

                text-align: center;

              top:40px;

                margin: 0;

                padding: 0 1em;

                background:#f09d28;

                font-weight:normal;

                font-style:oblique;

               z-index:99;

            }

             

            /**sub-menu, help for older IE**/

            #menu li:hover ul, nav li.hover ul {

                display: block;

                position: absolute;

                padding: 0;

            }

             

             

            #menu li:hover li,

            #menu li.hover li {float: none;}

             

             

            /**drop-menu style**/

            #menu li:hover li a, #menu li.hover li a {

                width: 9em;  /* adjust width as needed or use auto */

                margin-top: 0;

                line-height:1.25em;

                font-weight:normal;

                border:none;

            }

             

             

            /**drop-menu style on mouse over**/

            #menu li li a:hover {

                background:#D3E1B7;

                color: #004A43;

            }

             

             

            #menu li ul li a {

                color: #000;

              padding:5px;

                width:168px;

            }

            #menu li ul li:hover a {

                color:#94A6BF;

              padding:5px;

                width:168px;

            }

            #menu li:hover ul.noJS {

                display: block;

            }

            /* end menu */

            </style>

            <div id="menu">

                            <ul>

                            <li class="active"><a class="active" href="index.html">Home </a></li>

                            <li class="space">|</li>

                            <li><a href="aboutus.html">About</a></li>

                            <li class="space">|</li>

                            <li><a href="services.html">Services</a></li>

                            <li class="space">|</li>

                            <li><a href="faq.html">Systems</a>

                            <ul class="noJS">

                            <li><a href="#">Hellenico</a></li>

                            <li><a href="#">Genere</a></li>

                            <li><a href="#">Indulgentia</a></li>

                            </ul>

                            </li>

                            <li class="space">|</li>

                            <li><a href="folio.html">Projects</a></li>

                            <li class="space">|</li>

                            <li><a href="contact.html">Contact</a></li>

                            </ul>

                        </div> 


            As for other media types like mobile phones and ipad type devices, there is a different site for those, this site is for computer only. I wrote a script (responsive design) that looks at your device. SO I took that into consideration. Using jquery Mobil framework for those.

            • 3. Re: css driven navigation with dropdown
              Nancy OShea Adobe Community Professional & MVP

              Irish-Phoenix wrote:

              this site is for computer only.

              Um, have never heard of touch screen displays for laptop, desktop & hybrid tablet computers?

              They do exist and people are using them.

              Face it, you should be building everything with touch screen users in mind now.

              Welcome to progress .

               

              <!doctype html>
              <html>
              <head>
              <meta charset="utf-8">
              <title>Drop-Menu</title>
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
              <![endif]-->
              <!--Bootstrap-->
              <link rel="stylesheet" href="
              https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css">
              </head>
              <body>
              <div class="container">
              <h2>Touch Screen Friendly Dropdowns</h2>
              <p>The .dropdown class is used to indicate a dropdown menu.</p>
              <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
              <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
              <div class="dropdown">
              <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button>
              <ul class="dropdown-menu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">JavaScript</a></li>
              </ul>
              </div>
              
              <p> </p>
              <p> </p>
              <p> </p>
              
              <h2>A 2nd Example with Default Navbar:</h2>
              <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="#inverseNavbar1"><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="#">Brand</a></div>
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="inverseNavbar1">
              <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
              </ul>
              </li>
              </ul>
              <form class="hidden-sm navbar-form navbar-left" role="search">
              <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              </ul>
              </li>
              </ul>
              </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
              </nav><!-- /nav -->
              </div><!-- /.container -->
              
              <!-- jQuery -->
              <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
              <!--Bootstrap--> 
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
              </body>
              </html>
              
              
              
              
              
              
              

               

              Nancy O.

              1 person found this helpful