Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML  Menu Navigation

Posted on 2013-12-10
3
Medium Priority
?
694 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
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…

722 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