I have a menu made from Wordpress that serves as my site's navigation. Every main item in this menu is a Page Type (redirects to other existing pages) with one of them having submenus that are custom links.
These custom links' URLs are div IDs from the its parent page. This is how it's structured.
About Us
Who we are
What we do
How we do
So the submenus URLs are #who-we-are, #what-we-do, and #how-we-do which are sections from the About Us page. Now my problem is that when I am in the About Us page, the submenus links works properly. It scrolls up/down to the section it should. But when I am in another page (let's say Homepage), it doesn't redirect to it as it can't find any section in the page with that div.
Any ideas on what I should put on the URLs instead? Thanks in advance.
To get it to work, you have to attach the id tags to the url (otherwise it is treated as a relative link).
Example:
A main page: http://yourdomain.com/page1
Section URL: http://yourdomain.com/page1#who-we-are
Suppose your about us page url is "www.yoursite.com/about-us".
Then to jump directly into a section of this page from external page you need to put anchor tag like this
<a href='http://www.yoursite.com/about-us#who-we-are'/>
so you should give url "http://www.yoursite.com/about-us#who-we-are" for your custom link not only "#who-we-are".
click link and see address bar
Wordpress submenu link to a section of page
For this you have to attach the ids with the links of pages from which you want to get redirect to particular section.
Example: Let say your home page be http://www.yourdomain.com/
Now pass the id with this as : http://www.yourdomain.com/about-us/#who-we-are
http://www.yourdomain.com/about-us/#what-we-do
These should be the ids of the div's on about-us page.
Related
I want to use Anchor Tag for jump to relevant section of a page but i want to done this jump from any page for example WORK.html page(by menu).
I have a menu that there is in all pages. i want with click on any option, jump to relevant section but when am in another pages too.
such as this image: menu image!
in the image, I want to go from WORK page to Scaffolding or Typography that are on a single page.
this code is in menu codes in WORK.html:
go to relevant section
but should instead of "STYLE.html" jump to relevant section from "STYLE.html"
how to done this work???
Try to add an id to the div regarding the relevant part of your page. So put this preceded by the symbol id # at the end of the page link.
For example:
go to relevant section
Normally it works, using this example. http://www.computerhope.com/issues/ch000049.htm
But I am trying to do this in Shopify and so far no luck. I have a dropdown menu with headings that link to specific parts of a page. In the Shopify Nav links, I am using a "web address" option to add a link that looks like this. http://mysite.myshopify.com/pages/vollyball#anchor.
It links to that page but it does not slide down to the the specific area of the page that it's suppose to.
How can I do this?
Use this in link,
Title 4
This is for specific area of page.
<a name="title4">Title 4</a>
I might have done this the wrong way. I've made a navigation bar with 4 images that link to some other pages. The navigation bar is on every page as it should be. I can hover over the image to change the source, but I also want to change the source if I am on a specific page.
For example, when I click on 'shopping cart', my site navigates me out to that page and the navigation bar looks the exact same. I want the image that I clicked to change to a different image, only when I'm on that page. If I go to a different page, I want the image to return to it's original state. The user should be able to see all 4 images, and the 'shopping cart' one is the only one that looks different, implying that they are on the shopping cart page
Basically, I'm looking for something like what Twitter has done. (Image changes when you on 'Home' page and when you are on 'Connect' page).
I've tried the :active and the :focus class and those don't work for me. Maybe I need some Javascript? I'm honestly not sure. I've searched google up and down. I would appreciate any help, even if it is just new documentation that I can test.
Anything! Thanks :)
html:
<nav>
<ulstyle="list-style-type:none">
<li id="daily_sale" style="display:inline"></li>
<li id="my_account" style="display:inline"></li>
<li id="support" style="display:inline"></li>
<li id="shopping_cart" style="display:inline"></li>
</ul>
</nav>
What are your pages built with? WordPress? PHP? Static html pages?
Ideally, you would add a class to the nav bar item that you are currently on. For example, if you are on the Home page, add a class of "active" to your list item.
Then you can add CSS for the active class to change the background image.
You can use location.href property in javascript to detect the current page, and add some additional CSS class to corresponding menu item.
I have this anchor element:
<a href="mindex.html#clickableAnchor?showhide=1" id="clickableAnchor">
<!-- some content -->
</a>
I need to pass all three elements in href attribute:
- URI mindex.html
- ID #clickableAnchor
- GET parameter showhide
URI is for reloading the page,
ID is for scrolling the page to anchor,
GET parameter is sent for php script which decides either to show or hide a menu placed just under the anchor.
Page is reloading, menu is showing/hiding but the window is not scrolling to #clickableAnchor.
I resolved the problem using jQuery (by toggling the menu) but I want this feature working ALSO without javascript.
What should I do?
The anchor part of a URL comes after the query string. See Wikipedia: http://en.wikipedia.org/wiki/Url
Note that the browser won't scroll to the anchor if there is no scrollbar - if the page contents fit in the browser window, it can't scroll anywhere.
I have page1.html and page2.html. There are bunch of inline links on page2.html, on click of each link, page2 scrolls down to certain section on the screen.
Now, I need, on click of certain link on page1.html, page2.html should open and move page to certain section on the screen.
Which could also mean that on click of page1.html link, I am landing on page2.html and automatically some inline got clicked, which scrolled down my page to certain section on page2.html
Please can anyone help me in this.
Quick example...
If you have a link, i.e. http://www.example.com/page2.html#position1
This will navigate to page2.html, and if you have an html element on the page with id="position1" , it will also scroll down to that specific element.
You can use the # tag to set the id of the element you wish to scroll to.
E.g:
page2.html#blue will scroll down to the element with id="blue"
scibuff is right, if you use url framents like page2.html#elementIdHere. The browser will open page2.html and scroll to the elment with id elementIdHere.