Solved

Positioning of the DIVs

Posted on 2016-09-12
13
73 Views
Last Modified: 2016-09-13
I had this question after viewing jQuery DIV box colors and sizes.

Two issues left:
  The enclosing box height is too much (padding?).
  The enclosing box needs to be directly below the top level link whereas now it is diagonally down and to the right.
0
Comment
Question by:Howard Bash
  • 6
  • 6
13 Comments
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41794427
Can you please post a screenshot which shows your divs?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794524
DIVs with current placement and arrow indicating desired positon.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794648
I would recommend changing your markup as the way you have it currently is not conducive to the layout that you want.

Any particular reason you are using div's and not <ul>?

It sounds like you are wanting a horizontal menu drop down with panel sub-menus.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794651
Following on from the above post - here is an example of the type of menu I think you are wanting

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

Please confirm.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794666
That menu looks nice.  But,  the reason that I want to use the DIVs (if possible) is for using this menu on a SharePoint site.  I want to replace the current NAV menus with this DIV structure.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794744
I still don't understand if you are replacing the existing menus anyway why you can't use an <ul><li> approach.
To do it your way you have to create a container for your top menu items
<div class="menu-container">
    <div class="menu">
          <a href="#">Menu Item 1</a>
    </div>
    <div class="menu">
          <a href="#">Menu Item 1</a>
    </div>
</div>

Open in new window


Then for your submenu links you have to have  a container for your dropdowns
<div class="menu-container">
   <div class="sub-menu" style="display: none">
      ...
   </div>
   <div class="sub-menu" style="display: none">
      ...
   </div>
   ...
</div>

Open in new window

This is going to change your CSS and JavaScript in terms of how you handle the hover.
Is this in line with what you are wanting?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794775
Not clear on your example.  Are the ",,," sections the ul,li sections for each "top link"?  Also,  in my DIV container there is a DIV for just the TOP Level Menu Item and a DIV containing it's subordinate links.  If you can show me a small example using your structure/css/javascript,  I can better know if it is okay for my purposes.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794935
The ... was for you to fill in your code.

The problem with your solution - and with my suggestion above - is that we want the sub-menu to stay open when we hover over it. With both these solutions hovering over the parent should result in the child being hidden as soon as the mouse moves off the parent - so the sub-menu needs to be a child of the top link.
Here is a quick and dirty (does not require JavaScript / jQuery)
CSS
.menu-container {
  position: relative;
}
.menu-container .item {
  float: left;
  padding: 0 15px;
}
.menu-container:after {
  display: table;
  content: " ";
  clear: both;
}
.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
  left: 0;
  position: absolute;
}
.item:hover .sub-menu {
  display: block;
}

Open in new window

HTML
  <div class="container">
    <h5>Author: Julian Hansen, September 2016</h5>
    <div class="menu-container">
      <div class="item">
        <a href="http://www.w3schools.com/js/default.asp">1-JavaScript Tutorial</a>
          <div class="sub-menu">
            <div class="col_1_1" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">2-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">3-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">4-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          
            <div class="col_1_2" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">5-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">6-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">7-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_3" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">8-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">9-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">10-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_4" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">11-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">12-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">13-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_5" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">14-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">15-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">16-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_6" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">17-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">18-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">19-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          </div>
          
      </div>
      <div class="item">
        <a href="http://www.w3schools.com/js/default.asp">20-JavaScript Tutorial</a><br/>
           
          <div class="sub-menu">
            <div class="col_2_1" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">21-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">22-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">23-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
            
            <div class="col_2_2" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">24-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">25-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">26-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_3" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">27-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">28-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">29-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_4" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">30-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">31-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">32-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_5" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">33-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">34-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">35-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_6" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">36-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">37-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">38-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          </div>
        </div>
    </div>

Open in new window

Working sample here
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41795038
Very cool.  Thanks.  However,  there is an issue in that the dropdowns all appear at the same position and there is no visual sense which of the top level items we are seeing.
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41795075
Then just remove the
left: 0;
From the .sub-menu class (line 17 of css). I deliberately put that in to make the menus all left aligned.

What you can do is make the hover colour for the top menu different to indicate something like this.
.item:hover > a {
  background: red;
  color: white;
}

Open in new window

Updated sample here
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41795299
Excellent!  Thank you sir!!!
0
 
LVL 1

Author Closing Comment

by:Howard Bash
ID: 41795300
Excellent help.  Quick and clean!
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41795502
You are welcome.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question