I'm looking into an issue on a site that I manage.
Whats happening is that when you look at the cached version of the site (the text version) from Google it is not showing some of the child navigation links.
I'm not quite sure how google bots work to find these links but I cant see anything wrong with my markup.
Here is a snippet of code that i use for the navigation:
<div id="tabsPanel">
<ul>
<li class="home" id="home_item">
home
</li>
<li class="type" id="shopbystyle_item">
Style
<ul id="menucontainer" class="submenu" style="display: none;">
<li class="style1" id="contemporary_item">
<a href="/modern" class="item">
Modern
</a>
</li>
<li class="traditional" id="traditional_item">
<a href="/traditional" class="item">
Traditional
</a>
</li>
</ul>
</li>
<li class="type" id="shopbycolor_item">
Color
<ul id="menucontainer" class="submenu" style="display: none;">
<li class="style1" id="blue_item">
<a href="/blue" class="item">
Blue
</a>
</li>
<li class="traditional" id="red_item">
<a href="/red" class="item">
Red
</a>
</li>
</ul>
</li>
</ul>
</div>
The "Home" and "Style" links are picked up by Google however the "Modern" and "Traditional" links are not.
I use JavaScript to show/hide the sub menu but surely this shouldn't cause Google to not pick up those links? On other sites I have seen Google pick up links on navigation items that are shown using JavaScript.
Could it have something to do with the fact that both of my submenu ul elements have the same ID?
My question is why is Google only seeing the parent links and not the child links?
It turns out that using absolute URL's for the sub menu items worked. Not sure why this would be but i changed the following:
From this:
<li class="style1" id="contemporary_item">
<a href="/modern" class="item">
Modern
</a>
</li>
To this:
<li class="style1" id="contemporary_item">
<a href="http://www.example.com/modern" class="item">
Modern
</a>
</li>
Related
Sorry if this has been answered previously; I've dug around but can't find it. I'm using the Materialize sidenav by calling M.AutoInit() which works for me until I try putting it in a separate Javascript file. I've been able to set up my footer this way so I don't have repeat code, but this doesn't seem to work for the sidenav. The sidenav shows up but the collapsible part will not open.
I think the problem is it doesn't like calling the collapsible part from HTML that is being inserted dynamically. But I tried separating out the collapsible portion (using 2 different querySelectors) which did not work either. If I were to put at least part of the sidenav back into my HTML page, it would defeat the purpose of me doing this.
Any thoughts or solutions? Thanks for looking at it!
document.addEventListener("DOMContentLoaded", () => {
M.AutoInit()
document.querySelector('header').insertAdjacentHTML('afterbegin',
`<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<a
href="https://www.greece.org/"
target="_blank"
rel="noopener noreferrer"
>HEC Main</a
>
</li>
<li>
<a href="index.html" class="sidenav-close" rel="noopener noreferrer"
>Home</a
>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<button class="collapsible-header">
History<i class="material-icons">arrow_drop_down</i>
</button>
<div class="collapsible-body">
<ul class="sidenav-close">
<li>
A Brief Review
</li>
<li>Philosophers List</li>
<li>Philosophers Map</li>
<li>The Beginning</li>
<li>Socrates</li>
<li>Plato</li>
<li>Aristotle</li>
<li>
<a href="bibliography-references.html"
>Bibliograpy / References</a
>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
Media
</li>
<li>
Events
</li>
</ul>`)
document.querySelector('main').insertAdjacentHTML('afterend',
`<footer class="page-footer">
<div class="container">
<p class="center-align">
Philosophy is sponsored by
<a
href="https://www.greece.org"
target="_blank"
>
www.greece.org
</a> | © 2021 All Rights Reserved.
</p>
</div>
<div class="fixed-action-btn">
<a href="#top" class="btn-floating btn-large" style="background-color: silver;">
<i class="large material-icons">arrow_upward</i>
</a>
</div>
</footer>`)
})
Initialisation is a one time thing - it scans the document for the matching selector, and runs the initialisation on it. So, always run the initialisation AFTER any dynamic content is added. If you add stuff on the fly, just run the init again.
Codepen.
document.addEventListener('DOMContentLoaded', function() {
// Always add stuff to the page BEFORE running the init
// Anything hardcoded to the page will be fine if wrapped in a document ready.
M.AutoInit();
// Anything added after the init will NOT be initialised. It's a one time thing. Run the init at the end of any dynamic additions.
});
I am working on designing a page by looking at the image I have. I am stuck on the menu bar design as I am not able to figure out how can I design the menu bar like I have in my image. It should exactly match with what I have in my image.
Here is my jsfiddle and here is my image which I am trying to replicate.
I tried creating horizontal menu bar as shown in that image but somehow my menus are not showing at all. It looks like they are hidden somewhere. Here is my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png">
<h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>
What is wrong I am doing here? Also I need to make Log in | Sign up using font aswesome (and I have already imported its css in my jsfiddle) and GET COVERED button as well.
The first 2 problems are:
.dropdown {
display: none; /* get rid of this */
}
and you need your img to float: left.
Like the title says, I have a sidebar menu that I'm trying to get to completely slide up and out of sight when one of the menu items, blog, is clicked. Similar to this jsfiddle I found (preferrably without js simply bc I hardly know it, but if that's the only way no big): fiddle ; except my menu is already open and you will be clicking an item inside the menu to slide it up. I'm trying to get the menu to slide up slowly.
The menu looks like this:
Logo
home
blog
instagram
about
store
portfolio
contact
Everything I try changes the whole layout of the sidebar, which I don't want. Here's some of my code:
<div id="sidebar">
<div id="navigation">
<div id="logo">
<img src="Logos/headerlogo.jpg" width="208" height="80" longdesc="Logos/headerlogo.jpg">
</div>
<hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
<ul class="first" >
<li> Home</li>
<li> Blog</li>
<li> Instagram</li>
<li> About</li>
<li> Store</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</div>
I have some other code in there like a search bar, etc. but this is basically what I'm trying to get to roll up slowly when 'blog' is clicked. Any guidance is appreciated!
easy way to do it is use jquery, i think it impossible just with html and css, take a look with http://api.jquery.com/slideup/
You can get this effect by using jQuery's .animate and animating the position of your elements. In your case, you could do something like this, using a margin to create the sliding up animation. Please note that I added a class called blog to the blog link.
$('.first .blog').click(function(){
$('#sidebar').animate({
"marginTop": "-=500px" //animate margin to create slide up animation
}, 1000); //duration of animation, in milliseconds
});
Check out this JSFiddle.
You could do it like this.
FIDDLE
HTML:
<div id="sidebar">
<div id="navigation">
<div id="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" width="208" height="80" longdesc="Logos/headerlogo.jpg">
</div>
<hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
<div class="menu">
<ul class="first">
<li> Home
</li>
<li> <a class="blog" href="#" title="" runat="server">Blog</a>
</li>
<li> Instagram
</li>
<li> About
</li>
<li> Store
</li>
<li> Portfolio
</li>
<li> Contact
</li>
</ul>
</div>
Javascript:
$(".blog").on("click", function () {
var slide = $(this).closest(".first");
$(slide).slideToggle("slow");
});
I need some help making jQuery click and toggle function being simplified.
JS FIDDLE
This is what I have:
HTML
<div class="category-list-content">
<h4><strong>Category</strong></h4>
<ul class="category-list">
<li class="">
Company
</li>
<li class="">
Industry
</li>
<li class="">
Job Title
</li>
<li class="">
Tenure
</li>
<li class="">
Seniority Level
</li>
</ul>
</div>
ABOVE are my main category list
<div class="category-list-sub-content">
<h4><strong>Sub Category</strong></h4>
<ul class="segmentation-list ">
<p>Company</p>
<li class="">9lenses</li>
</ul>
<ul class="category-list ">
<p>Industry</p>
<li class="">Avation</li>
<li class="">Software</li>
<li class="">Mobile</li>
<li class="">Cars</li>
</ul>
<ul class="category-list">
<p>Job Title</p>
<li class="">UI Developer</li>
<li class="">UX Developer</li>
<li class="">Designers</li>
<li class="">Web Developers</li>
</ul>
<ul class="category-list">
<p>Tenure</p>
<li class=""> 5 years</li>
<li class="">< 5 years</li>
<li class="">> 5 years</li>
<li class="">10 years</li>
<li class="">1 year</li>
</ul>
<ul class="category-list ">
<p>Seniority Level</p>
<li class="">Team Lead</li>
<li class="">Juniour Employee</li>
<li class="">Intern</li>
<li class="">Director</li>
<li class="">CEO</li>
</ul>
</div>
This are sub-category list.
I was wanting to make something like when I click on the Company Sub category of Company will show and other sub-categories remain hidden. and when I click on the Industry , Industry subcategory will show and other will be hidden. Same goes for every category. Something like tab effect. I can do this by adding classes on each categories and sub-categories and giving .show() and .hide() functions. but it will huge to add unique classes. Also I may add more categories and sub categories later. So is there any good way to make this work how I describe ? If you need to alter(add any class or ID) anything to make this work that will be fine.
Any help will be appreciated. I am really suffering with this.
What you can do is setting a #hash in every tag of you category menu like:
<li class="">
Company
</li>
Set the id corresponding on in your "main category list" like :
<ul class="segmentation-list " id="company">
<p>Company</p>
Then set an event on each tag, detect the #hash and show only the right div. A little research on something called the web could have helped you. I'm not gonna give you the complete code, try doing it yourself if you don't want other downvoting your question.
I have a navigation on my site where the last link opens a modal.
Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.
Is there any way to do so?
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
Kontakt
</li>
</ul>
</nav>
I've found a solution without adding extra markup, but this is not so beautiful.
The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.
I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.
A solution for your problem may be :
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
<a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
</li>
</ul>
</nav>