locked
hi everyone..! RRS feed

  • Question

  • User-64994166 posted

    Good evening Guys I am new in c# development and razor web pages actually I am working on a little cms system in webmatrix and now I am stuck with navigation system actually i wanted make parent menu sub parent menu or  Child menu system and I don't know that how to link parent sub parent or child pages.
    Please can anyone help me to resolve this issue

    Thanks in advance☺

    Sunday, June 12, 2016 3:11 PM

Answers

  • User379720387 posted

    www.getbootstrap.com  is the framework you probably need to be looking at, then get a free bootstrap template and build out from there.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 15, 2016 12:20 PM
  • User895691971 posted

    Apart from what wavemaster has told you, I would recommend that you also share the HTML that you are using. Although the answer by wavemaster is enough in this sense but to guide you even deeply to understand how navigation works, I would like to see your HTML content and provided you some more guidance on this subject.

    Basically, navigation is just HTML listing, where each list item can hold other list items as sub menu. For example and for sake of demonstration, I am going to use the following HTML content from jQuery website, 

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#menu" ).menu();
      });
      </script>
      <style>
      .ui-menu { width: 150px; }
      </style>
    </head>
    <body>
     
    <ul id="menu">
      <li class="ui-state-disabled">Aberdeen</li>
      <li>Ada</li>
      <li>Adamsville</li>
      <li>Addyston</li>
      <li>Delphi
        <ul>
          <li class="ui-state-disabled">Ada</li>
          <li>Saarland</li>
          <li>Salzburg an der schönen Donau</li>
        </ul>
      </li>
      <li>Saarland</li>
      <li>Salzburg
        <ul>
          <li>Delphi
            <ul>
              <li>Ada</li>
              <li>Saarland</li>
              <li>Salzburg</li>
            </ul>
          </li>
          <li>Delphi
            <ul>
              <li>Ada</li>
              <li>Saarland</li>
              <li>Salzburg</li>
            </ul>
          </li>
          <li>Perch</li>
        </ul>
      </li>
      <li class="ui-state-disabled">Amesville</li>
    </ul>
     
     
    </body>
    </html>

    You can try this HTML out on their website at, https://jqueryui.com/menu/. This HTML will show you how you can create HTML navigation menus in jQuery. The navigation is full featured and still is very simple. You can always change the look and feel too. 

    But remember, my recommendation is also to use bootstrap, it has many extra features. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 11:35 AM

All replies

  • User379720387 posted

    www.getbootstrap.com  is the framework you probably need to be looking at, then get a free bootstrap template and build out from there.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 15, 2016 12:20 PM
  • User895691971 posted

    Apart from what wavemaster has told you, I would recommend that you also share the HTML that you are using. Although the answer by wavemaster is enough in this sense but to guide you even deeply to understand how navigation works, I would like to see your HTML content and provided you some more guidance on this subject.

    Basically, navigation is just HTML listing, where each list item can hold other list items as sub menu. For example and for sake of demonstration, I am going to use the following HTML content from jQuery website, 

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#menu" ).menu();
      });
      </script>
      <style>
      .ui-menu { width: 150px; }
      </style>
    </head>
    <body>
     
    <ul id="menu">
      <li class="ui-state-disabled">Aberdeen</li>
      <li>Ada</li>
      <li>Adamsville</li>
      <li>Addyston</li>
      <li>Delphi
        <ul>
          <li class="ui-state-disabled">Ada</li>
          <li>Saarland</li>
          <li>Salzburg an der schönen Donau</li>
        </ul>
      </li>
      <li>Saarland</li>
      <li>Salzburg
        <ul>
          <li>Delphi
            <ul>
              <li>Ada</li>
              <li>Saarland</li>
              <li>Salzburg</li>
            </ul>
          </li>
          <li>Delphi
            <ul>
              <li>Ada</li>
              <li>Saarland</li>
              <li>Salzburg</li>
            </ul>
          </li>
          <li>Perch</li>
        </ul>
      </li>
      <li class="ui-state-disabled">Amesville</li>
    </ul>
     
     
    </body>
    </html>

    You can try this HTML out on their website at, https://jqueryui.com/menu/. This HTML will show you how you can create HTML navigation menus in jQuery. The navigation is full featured and still is very simple. You can always change the look and feel too. 

    But remember, my recommendation is also to use bootstrap, it has many extra features. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 11:35 AM