Solved

HTML  Menu Navigation

Posted on 2013-12-10
3
675 Views
Last Modified: 2013-12-10
I have a ASP.NET site using an HTML menu.  I have several pages within different folders in the site.  The navigation is not working correctly with the pages that are in the folders.  I am inserting the navigation menu as it existed prior to adding the folders and pages within the folders.  When I navigate to a page within a folder I don't know how to fix it so it will navigate to a page outside of the folder.  The only way I know of is with ASP: Menu using a Navigation URL.  However I don't want to use that method,.  Thanks.

<div class="collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Home
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="active"><a href="index.html">Option 1: Default Page</a></li>
                            <li><a href="page_home1.html">Option 2: Layer Slider</a></li>
                            <li><a href="page_home2.html">Option 3: Revolution Slider</a></li>
                            <li><a href="page_home3.html">Option 4: Amazing Content</a></li>
                            <li><a href="page_home4.html">Option 5: Home Sidebar</a></li>
                            <li><a href="page_home5.html">Option 6: Home Flatty</a></li>
                            <li><a href="page_home6.html">Option 7: Home Magazine</a></li>
                            <li><a href="page_home7.html">Option 8: Home Portfolio</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Pages
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="page_about.html">About Us</a></li>
                            <li><a href="page_about1.html">About Us Option</a></li>
                            <li><a href="page_services.html">Services</a></li>
                           <li><a href="page_404_error.html">404 Error</a></li>
                            <li><a href="page_404_error1.html">404 Error Option</a></li>
                            <li><a href="page_clients.html">Clients Page</a></li>
                            <li><a href="page_privacy.html">Privacy Policy</a></li>
                            <li><a href="page_terms.html">Terms Of Service</a></li>
                            <li><a href="page_2_columns_left.html">2 Columns Page Left</a></li>
                            <li><a href="page_2_columns_right.html">2 Columns Page Right</a></li>
                            <li><a href="page_3_columns.html">3 Columns Page</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Features
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="feature_grid.html">Grid Layout</a></li>
                            <li><a href="feature_boxes.html">Content Boxes</a></li>
                            <li><a href="feature_typography.html">Typography</a></li>
                            <li><a href="feature_tagline_boxes.html">Tagline Boxes</a></li>
                            <li><a href="feature_buttons.html">Buttons</a></li>
                            <li><a href="feature_icons.html">Icons</a></li>
                            <li><a href="feature_thumbails.html">Thumbails</a></li>
                            <li><a href="feature_components.html">Components</a></li>
                            <li><a href="feature_accardion_and_tabs.html">Accardion and Tabs</a></li>
                            <li><a href="feature_navigations.html">Navigations</a></li>
                            <li><a href="feature_tables.html">Tables</a></li>
                            <li><a href="feature_forms.html">Forms</a></li>
                            <li><a href="feature_testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Portfolio
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="portfolio_text_blocks.html">Portfolio Text Blocks</a></li>
                            <li><a href="portfolio_2_column.html">Portfolio 2 Columns</a></li>
                            <li><a href="portfolio_3_column.html">Portfolio 3 Columns</a></li>
                            <li><a href="portfolio_4_column.html">Portfolio 4 Columns</a></li>
                            <li><a href="portfolio_item.html">Portfolio Item Option 1</a></li>
                            <li><a href="portfolio_item1.html">Portfolio Item Option 2</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Blog
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="blog_page.html">Blog Page</a></li>
                            <li><a href="blog_large.html">Blog Large</a></li>
                            <li><a href="blog_medium.html">Blog Medium</a></li>
                            <li><a href="blog_full_width.html">Blog Full Width</a></li>
                            <li><a href="blog_left_sidebar.html">Blog Left Sidebar</a></li>
                            <li><a href="blog_right_sidebar.html">Blog Right Sidebar</a></li>
                            <li><a href="blog_item_option1.html">Blog Item Option 1</a></li>
                            <li><a href="blog_item_option2.html">Blog Item Option 2</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Contacts
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="page_contact1.html">Contacts Default</a></li>
                            <li><a href="page_contact2.html">Contacts Option 1</a></li>
                            <li><a href="~/default.aspx">Contacts Option 2</a></li>
                            <li><a href="~/Account/Login.aspx">Login</a></li>
                        </ul>
                    </li>                    
                    <li class="hidden-sm"><a class="search"><i class="icon-search search-btn"></i></a></li>
                </ul>
                <div class="search-open">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button class="btn-u" type="button">Go</button>
                        </span>
                    </div><!-- /input-group -->
                </div>                
            </div>
0
Comment
Question by:misnstt
  • 2
3 Comments
 
LVL 29

Expert Comment

by:Paul Jackson
ID: 39709763
Can you post the structure of your website showing the folder structure you're referring to.
Normally in the situation you describe you would change the href url so that it always starts at the root of the website  and then works up to where the page is located like :

href = "~/foldername/pagename.htm"
0
 

Author Comment

by:misnstt
ID: 39709832
Hello I am attaching a image with a portion of the folder structure.  If I select a page in for example the Account Folder it is no problem.  I tried marking the pages within the Account folder as you suggested :
href = "~/Default.aspx"   to go to the main Default page outside of the Account Folder and that will not work.

Folder Structure
0
 
LVL 29

Accepted Solution

by:
Paul Jackson earned 500 total points
ID: 39709855
try :

href="../Default.aspx"

each ../ means to go up one level

so if it was 2 folder levels down from the root you would use:

../../Default.aspx
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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)

828 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