Simple is Beautiful MyCnnStyleMenu Demo

PLUGIN NAME

jquery.MyCnnStyleMenu.js

Project Host

Google Code

DESCRIPTION

This simple menu is created using jquery + CSS + Google web font. Since no image is involved, it is very easy to maintain and update. You can change the font family, size, color in a CSS file.

  • simple tab menu
  • no images required
  • jquery + CSS solution
  • select current page automatically
  • smooth scroll to bookmark
  • use together with google web font
  • cross browser (work in IE / FF / chrome / Safari / opera)

DOWNLOAD

jquery.MyCnnStyleMenu.js, MyCnnStyleMenu.css

LICENSE

MIT license

PLUGIN AUTHOR

http://www.kfsoft.info

OTHER PLUGINS

DEMO

The demo is showed at the top of this page.

HTML code:

<DIV id="headerDiv" align="center">

  <DIV id="logoDiv">
  
    <!-- PUT YOUR LOGO HERE //-->
	
    <span id="bannerText">Site name</span>
    <span id="siteDescription">Site description</span>
	
  </DIV>
  
  <DIV id="menuDiv">
  
    <!-- PUT MENU HERE AS AN UNORDERED LIST
    "current" class will be highlighted //-->
	
    <ul id="MyCnnStyleMenu">
      <li><a href="demo.php">HOME</a></li>
      <li><a href="#bookmark">#bookmark</a></li>
      <li>...</li>
    </ul>
  </DIV>
  
</DIV>

jQuery code:

$(function(){
  $("#MyCnnStyleMenu li").MyCnnStyleMenu();
  
  //OR
  
  $("#MyCnnStyleMenu li").MyCnnStyleMenu({
    GoogleFontFamily:"Oswald",
    GoogleFontSize:"16px"
  });

Back to My Blog