CODEWITHSUNDEEP
htmlcssnavigationbar
Aurax22
Aurax22

Reputation: 111

Vertical Navigation - Load Html page on Click

I am working on a vertical accordion navigation menu.

For each sub-menu I created an HTML page that I want to display. In short, when I click on sub-menu "Reports", I want to display the red box (see code below) on the page and keep the navigation menu showing.

Simple question, sorry but where, in my code, am I supposed to do this and how? My first guess was to direct the sub-menu to my external html file but so far what I have done allows me to re-direct to another HTML page only, the navigation menu then disappears.

Do I need to create a sort of "container" next to the navigation menu?

Here is a jsfiddle of the navigation menu.

And below is the HTML code:

    <!doctype html>
    <html lang=''>
    <head>

        <style type="text/css">

    body {
      width: 1280px;
      height: 720px;
      background-color: #E0EBEB;
    }

    </style>
       <meta charset='utf-8'>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="styles.css">
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
       <script src="script.js"></script>
       <title>DCA Application</title>
    </head>

    <body>
    <div id="sidebar">
                <h1>Sidebar</h1>
    </div>

    <div id='cssmenu'>
    <ul>

       <li class='active'><a href='#'><span>Home</span></a></li>
       <li class='has-sub'><a href='#'><span>Past</span></a>
          <ul>
<!-- I do not get the result I want if I put "Reports.html" down here -->
             <li><a href='#'><span>Reports</span></a></li>
          </ul>
       </li>
       <li class='has-sub'><a href='#'><span>Present</span></a>
          <ul>
             <li><a href='#'><span>DDS</span></a></li>
             <li class='last'><a href='#'><span>Load Management</span></a></li>
          </ul>
           <li class='has-sub'><a href='#'><span>Future</span></a>
          <ul>
             <li><a href='#'><span>To be defined</span></a></li>
          </ul>
       </li>
       </li>
       <li class='last'><a href='#'><span>Support</span></a></li>
    </ul>
    </div>       
       </body>
    <html>

And the code for one of the html pages:

<html>
    <head>

<meta charset="UTF-8">

<!-- css part -->

    <style type="text/css">
        <style type="text/css">
*{
margin:0;
padding:0;
}
#blackbox{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
margin-top:-100px;
margin-left:-100px;
border:1px solid black;
height: 90px;
line-height: 90px;
text-align:center; 
vertical-align:middle;
}

</style>

        </style>

<!-- css part end -->
<!-- html part beg -->

</head>
    <body>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<div id="main">

    <div id="blackbox"> 
    <div style="background-color:"> 
    <div class="results"> </div> 
    </div>
   </div>

<!-- html part end -->

<!-- js part -->

<script language="JavaScript"  type="text/javascript">

        var color1 = "#800080";
    var color2 = "#FF0000";
    var result = 1;
    document.querySelector('.results').innerHTML = result;
    if (result < 0) {
    document.querySelector('div').style.backgroundColor = color1;
    } else {
    document.querySelector('div').style.backgroundColor = color2;
    }

        </script>   

<!-- js part -->

    </body>
</html>

Upvotes: 0

Views: 719

Answers (1)

Raider
Raider

Reputation: 137

Option 1 Set the id or title attr on each ul like 

    <ul id=title> or <ul title=title>

    //Get the title of the page like this

    var title = document.title; 

    //find this ul  using jquery 
    $("ul[title='title']").slideDown();
//or
    $('#'+title).slideDown();

Option 2 Try this. i have only added three lines with comments. you might have to split the actual url. I am sure you can do that easily.

    ( function( $ ) {
    $( document ).ready(function() {
  //get the url  
var  url =$(location).attr('href');

//find the a tag having this url and its parent
      var tag =$( "a[href='url']" ).parent().parent();
//slide it down   
 $(tag).slideDown('normal')
    $('#cssmenu > ul > li ul').each(function(index, e){
      var count = $(e).find('li').length;
      var content = '<span class=\"cnt\">' + count + '</span>';
      $(e).closest('li').children('a').append(content);
    });
    $('#cssmenu ul ul li:odd').addClass('odd');
    $('#cssmenu ul ul li:even').addClass('even');
    $('#cssmenu > ul > li > a').click(function() {
      $('#cssmenu li').removeClass('active');
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }
      if($(this).closest('li').find('ul').children().length == 0) {
        return true;
      } else {
        return false;   
      }     
    });

    });
    } )( jQuery );

Upvotes: 1

Related Questions