Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Combine Vertical and Horizontal

Home › Forums › Older releases › 0.9.x › Combine Vertical and Horizontal

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 16, 2015 at 04:09 #2380
    mfandel
    Participant

    I was working to make the second sub navigation horizontal before going to vertical for the third level. Not sure if I want about it correctly, but I got pretty close.

    The problem I am having is positioning the third tier of vertical navigation next to their parent. My guess is something with the fact that I added a negative margin to the first subnav.

    Anyway in case I am going at this wrong. WHat I wanted was Initial horizontal nav, next level another horizontal nav that was full screen width, then at the third level go back to vertical list.

    Here is where I got.

    http://galiantdemos.com/navtest/demo/PLRB_NAVIGATION.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">

<!-- Bootstrap core CSS -->
<link href="../libs/demo-assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">


</head>
<style>
	.navbar-blue{background-color:#00477f; min-height:110px;}
	a {color:#fff;}
	a:hover{background-color: #008bc4 !important;}
	.navbar-toggle .icon-bar{background-color:#fff;}
	.mainlinks{width:100%;}
	.dropdown-menu{background-color:#008bc4 !important;}
	.dropdown-menu > li> a {color:#fff !important;}
	.dropdown-menu >.sublink1{display: inline !important; min-width:700px !important;}
	.subnav1 >  li {display: inline !important; float:left !important;}
	.open> ul.subnav1 {display: inline-flex !important; min-width:1920px !important; max-width:1920px !important; margin-left:-200px !important;}




	



	
</style>
<body>


<!-- Static navbar -->
<div class="navbar navbar-blue" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 href="#">LOGO HERE</a>
  </div>
  <div class="navbar-collapse collapse">

    <!-- Left nav -->
    <ul class="nav navbar-nav mainlinks">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Dropdown</a>
        <ul class="dropdown-menu subnav1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a>
            <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
          </ul>
          </li>
        
          <!--<li class="divider"></li>-->
          <!--<li class="dropdown-header">Nav header</li>-->
          <li><a href="#">Separated link</a>
          <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
          </ul>
          </li>
          <li><a href="#">One more separated link</a>
            <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="disabled"><a href="#">Disabled item</a></li>
                  <li><a href="#">One more link</a></li>
                  <li><a href="#">Menu item 1</a></li>
                  <li><a href="#">Menu item 2</a></li>
                  <li><a href="#">Menu item 3</a></li>
                  <li><a href="#">Menu item 4</a></li>
                  <li><a href="#">Menu item 5</a></li>
                  <li><a href="#">Menu item 6</a></li>
                  <li><a href="#">Menu item 7</a></li>
                  <li><a href="#">Menu item 8</a></li>
                  <li><a href="#">Menu item 9</a></li>
                  <li><a href="#">Menu item 10</a></li>
                  <li><a href="#">Menu item 11</a></li>
                  <li><a href="#">Menu item 12</a></li>
                  <li><a href="#">Menu item 13</a></li>
                  <li><a href="#">Menu item 14</a></li>
                  <li><a href="#">Menu item 15</a></li>
                  <li><a href="#">Menu item 16</a></li>
                  <li><a href="#">Menu item 17</a></li>
                  <li><a href="#">Menu item 18</a></li>
                  <li><a href="#">Menu item 19</a></li>
                  <li><a href="#">Menu item 20</a></li>
                  <li><a href="#">Menu item 21</a></li>
                  <li><a href="#">Menu item 22</a></li>
                  <li><a href="#">Menu item 23</a></li>
                  <li><a href="#">Menu item 24</a></li>
                  <li><a href="#">Menu item 25</a></li>
                  <li><a href="#">Menu item 26</a></li>
                  <li><a href="#">Menu item 27</a></li>
                  <li><a href="#">Menu item 28</a></li>
                  <li><a href="#">Menu item 29</a></li>
                  <li><a href="#">Menu item 30</a></li>
                  <li><a href="#">Menu item 31</a></li>
                  <li><a href="#">Menu item 32</a></li>
                  <li><a href="#">Menu item 33</a></li>
                  <li><a href="#">Menu item 34</a></li>
                  <li><a href="#">Menu item 35</a></li>
                  <li><a href="#">Menu item 36</a></li>
                  <li><a href="#">Menu item 37</a></li>
                  <li><a href="#">Menu item 38</a></li>
                  <li><a href="#">Menu item 39</a></li>
                  <li><a href="#">Menu item 40</a></li>
                  <li><a href="#">Menu item 41</a></li>
                  <li><a href="#">Menu item 42</a></li>
                  <li><a href="#">Menu item 43</a></li>
                  <li><a href="#">Menu item 44</a></li>
                  <li><a href="#">Menu item 45</a></li>
                  <li><a href="#">Menu item 46</a></li>
                  <li><a href="#">Menu item 47</a></li>
                  <li><a href="#">Menu item 48</a></li>
                  <li><a href="#">Menu item 49</a></li>
                  <li><a href="#">Menu item 50</a></li>
                  <li><a href="#">Menu item 51</a></li>
                  <li><a href="#">Menu item 52</a></li>
                  <li><a href="#">Menu item 53</a></li>
                  <li><a href="#">Menu item 54</a></li>
                  <li><a href="#">Menu item 55</a></li>
                  <li><a href="#">Menu item 56</a></li>
                  <li><a href="#">Menu item 57</a></li>
                  <li><a href="#">Menu item 58</a></li>
                  <li><a href="#">Menu item 59</a></li>
                  <li><a href="#">Menu item 60</a></li>
                </ul>
              </li>
              <li><a href="#">Another link</a></li>
              <li><a href="#">One more link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

 

  </div><!--/.nav-collapse -->
</div>






<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../libs/demo-assets/bootstrap/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>



</body>
</html>
    April 16, 2015 at 08:56 #2381
    mfandel
    Participant

    Ok, some late night searching and trying I have it close to working so wanted to share.
    To be safe, not sure if this is the best way to do this, but I got it to work with a few css hacks. If anyone has a better solution please let me know.

    Also I do have one last issue I can’t figure out.
    on the second level of navigation that I was able to make horizontal the arrow is way over to the left and there are not arrows on each item that has a dropdown. Any help would be great.

    Here is the changed version:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">

<!-- Bootstrap core CSS -->
<link href="../libs/demo-assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">


</head>
<style>
	.navbar-blue{background-color:#00477f; min-height:110px;}
	a {color:#fff;}
	a:hover{background-color: #008bc4 !important;}
	.navbar-toggle .icon-bar{background-color:#fff;}
	.mainlinks{width:100%;}
	.dropdown-menu{background-color:#008bc4 !important;}
	.dropdown-menu > li> a {color:#fff !important;}
.mainlinks > li {position: static !important; display:inline;}
 .mainlinks > li > ul {margin-left:0 !important;	right:0 !important;	width:auto !important; 	max-width:none !important;}
	.subnav1 >  li {display: inline !important; float:left !important;}
	.open> ul.subnav1 {display: inline-flex !important;}
.subnav1 >li {position: static !important;}
 .subnav1 > li > ul {position:relative !important; margin-left:0 !important; top:33px !important;	left:0px !important; 	width:auto !important; 	max-width:none !important;}
 .subnav1{max-height: 35px;}
 .subnav1 a:hover{background-color: #00477f !important;}
.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:#008bc4!important;}


</style>
<body>


<!-- Static navbar -->
<div class="navbar navbar-blue" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 href="#">LOGO HERE</a>
  </div>
  <div class="navbar-collapse collapse">

    <!-- Left nav -->
    <ul class="nav navbar-nav mainlinks">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Dropdown</a>
        <ul class="dropdown-menu subnav1">
          <li><a href="#">Action One</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a>
            <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
          </ul>
          </li>
        
          <!--<li class="divider"></li>-->
          <!--<li class="dropdown-header">Nav header</li>-->
          <li><a href="#">Another Drop Down</a>
          <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
          </ul>
          </li>
          <li><a href="#">One more separated link</a>
            <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="disabled"><a href="#">Disabled item</a></li>
                  <li><a href="#">One more link</a></li>
                  <li><a href="#">Menu item 1</a></li>
                  <li><a href="#">Menu item 2</a></li>
                  <li><a href="#">Menu item 3</a></li>
                  <li><a href="#">Menu item 4</a></li>
                  <li><a href="#">Menu item 5</a></li>
                  <li><a href="#">Menu item 6</a></li>
                  <li><a href="#">Menu item 7</a></li>
                  <li><a href="#">Menu item 8</a></li>
                  <li><a href="#">Menu item 9</a></li>
                  <li><a href="#">Menu item 10</a></li>
                  <li><a href="#">Menu item 11</a></li>
                  <li><a href="#">Menu item 12</a></li>
                  <li><a href="#">Menu item 13</a></li>
                  <li><a href="#">Menu item 14</a></li>
                  <li><a href="#">Menu item 15</a></li>
                  <li><a href="#">Menu item 16</a></li>
                  <li><a href="#">Menu item 17</a></li>
                  <li><a href="#">Menu item 18</a></li>
                  <li><a href="#">Menu item 19</a></li>
                  <li><a href="#">Menu item 20</a></li>
                  <li><a href="#">Menu item 21</a></li>
                  <li><a href="#">Menu item 22</a></li>
                  <li><a href="#">Menu item 23</a></li>
                  <li><a href="#">Menu item 24</a></li>
                  <li><a href="#">Menu item 25</a></li>
                  <li><a href="#">Menu item 26</a></li>
                  <li><a href="#">Menu item 27</a></li>
                  <li><a href="#">Menu item 28</a></li>
                  <li><a href="#">Menu item 29</a></li>
                  <li><a href="#">Menu item 30</a></li>
                  <li><a href="#">Menu item 31</a></li>
                  <li><a href="#">Menu item 32</a></li>
                  <li><a href="#">Menu item 33</a></li>
                  <li><a href="#">Menu item 34</a></li>
                  <li><a href="#">Menu item 35</a></li>
                  <li><a href="#">Menu item 36</a></li>
                  <li><a href="#">Menu item 37</a></li>
                  <li><a href="#">Menu item 38</a></li>
                  <li><a href="#">Menu item 39</a></li>
                  <li><a href="#">Menu item 40</a></li>
                  <li><a href="#">Menu item 41</a></li>
                  <li><a href="#">Menu item 42</a></li>
                  <li><a href="#">Menu item 43</a></li>
                  <li><a href="#">Menu item 44</a></li>
                  <li><a href="#">Menu item 45</a></li>
                  <li><a href="#">Menu item 46</a></li>
                  <li><a href="#">Menu item 47</a></li>
                  <li><a href="#">Menu item 48</a></li>
                  <li><a href="#">Menu item 49</a></li>
                  <li><a href="#">Menu item 50</a></li>
                  <li><a href="#">Menu item 51</a></li>
                  <li><a href="#">Menu item 52</a></li>
                  <li><a href="#">Menu item 53</a></li>
                  <li><a href="#">Menu item 54</a></li>
                  <li><a href="#">Menu item 55</a></li>
                  <li><a href="#">Menu item 56</a></li>
                  <li><a href="#">Menu item 57</a></li>
                  <li><a href="#">Menu item 58</a></li>
                  <li><a href="#">Menu item 59</a></li>
                  <li><a href="#">Menu item 60</a></li>
                </ul>
              </li>
              <li><a href="#">Another link</a></li>
              <li><a href="#">One more link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

 

  </div><!--/.nav-collapse -->
</div>






<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../libs/demo-assets/bootstrap/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>



</body>
</html>
    April 20, 2015 at 12:24 #2390
    admin
    Keymaster

    Hi,

    There is no “official” documented way of doing this so if what you’ve done works for you, you should be good to go with it. To fix the sub arrows issue, you could use additionally something like:

    .subnav1 >li > a { position: relative; }
.subnav1 > li > a > .sub-arrow {
      margin-top: 8px;
      border-top: 4px solid;
      border-bottom: 4px dashed transparent;
      border-left: 4px dashed transparent;
}

    Apart from that it’s a good idea to wrap your rules for the horizontal sub menu in a media query to prevent breaking the Bootstrap’s collapsible styles – i.e. something like:

    @media (min-width:768px) {
	.mainlinks > li {position: static !important; display:inline;}
 	.mainlinks > li > ul {margin-left:0 !important;	right:0 !important;	width:auto !important; 	max-width:none !important;}
	.subnav1 >  li {display: inline !important; float:left !important;}
	.open> ul.subnav1 {display: inline-flex !important;}
	.subnav1 >li {position: static !important;}
	.subnav1 >li > a {position: relative;}
  	.subnav1 >li > a > .sub-arrow {
      margin-top:8px;
      border-top:4px solid;
      border-bottom:4px dashed transparent;
      border-left:4px dashed transparent;
	}
 	.subnav1 > li > ul {position:relative !important; margin-left:0 !important; top:33px !important;	left:0px !important; 	width:auto !important; 	max-width:none !important;}
 	.subnav1{max-height: 35px;}
 }

    Cheers!

    June 12, 2016 at 15:02 #3188
    adameh_bahal
    Participant

    Is there any way that it works with n level and also parent width does not changed on hover when some of its children has bigger width than parent div?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘0.9.x’ is closed to new topics and replies.