This question already has an answer here:
How do I handle having to many links on a webpage because
of my menu
4 answers
I'm using the term "Mega Menus" loosely here.
I'm redesigning my WordPress site (it's going to be responsive), and as part
of the redesign, I was debating incorporating some sort
of descriptive menu setup. For example, normal navigation drop down menus come in the form
of unordered lists
of links like so:
<nav>
<ul>
<li>
<a href="#">Link1</a>
</li>
<li>
<a href="#">Link2</a>
</li>
<li>
<a href="#">Link3</a>
<ul>
<li>
<a href="#">Sub Link1</a>
</li>
<li>
<a href="#">Sub Link2</a>
</li>
<li>
<a href="#">Sub Link3</a>
</li>
</ul>
</li>
<li>
<a href="#">Link4</a>
</li>
</ul>
</nav>
What I'm looking to do is build my drop down menus with more information than your standard menu. For example, I have a top
level link named "Team", and under that link, I want to make a large drop down that contains head shots, headers (in the form
of styled p tags) and brief (<100 words) descriptions
of each team member (only 2 currently). I want to accompany this with a "Read More" link that takes you to their actual team page. This is just one example,
of course, and the other top
level links would also have descriptive drop downs in the same fashion.
On mobile, I was planning on hiding the "mega menu", and delivering a standard unordered list
of links. Here's what I was thinking for overall structure and syntax:
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Team</a>
<ul>
<!-- DESKTOP -->
<li class="mega-menu row">
<a class="col-sm-6" href="#">
<div class="row">
<div class="col-sm-4">
<img src="#" alt="Team Member 1" />
</div>
<div class="col-sm-8">
<p class="header">Team Member 1</p>
<p>Short description goes here.</p>
</div>
</div>
</a>
<a class="col-sm-6" href="#">
<!-- OTHER TEAM MEMBER INFO -->
</a>
</li>
<!-- END DESKTOP -->
<!-- MOBILE -->
<li>
<a href="#">Team Member 1</a>
</li>
<li>
<a href="#">Team Member 2</a>
</li>
<!-- END MOBILE -->
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
Can anybody think
of any potential SEO ramifications
of doing this? I'm not going to be loading these menus full
of links, so it shouldn't hurt page rank, but what are the effects
of having a good bit
of text and maybe even forms within nav elements? Is there such a thing as overloading nav with HTML?
EDIT: Here's an example
of what the menu would look like rendered on desktop. I'm currently hovering the "Team" menu, but you can't see because my mouse went away when I took the screenshot.
EDIT 2:
This question is not a duplicate. I'm not going to have "too many" links in my menus. I'm wondering how having images and text inside
of header navigation will affect my menus. Also, I don't just want "yes, this is bad" answers. Please cite your sources and be specific with reasoning.
