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.
