SP2010: A 2 Level Suckerfish Dropdown with V4 styling

This sample is a modified version of a 2 Level Suckerfish Dropdown styled for Sharepoint V4.

Thanks to Patrick Griffiths.

2 Level Suckerfish Dropdown


<!-- saved from url=(0068)http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html -->

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
SP Suckerfish 2LevelS Dropdown Tester</pre>
<style type="text/css"><!--
    body {
        font-family: Verdana, Arial, sans-serif;
        font-size: 8pt;
        color: #676767;
    }

    #content {
        clear: left;
        color: #cccccc;
    }
    .flowleft {
        float:left; /* enable inline flow to the right */
    }
--></style><style type="text/css"><!--
    /* These styles create the dropdown menus. */
    /*#s4-workspace {}*/
    #navbar {
        /* http://css-tricks.com/fighting-the-space-between-inline-block-elements */
        display: inline-block;/* remove CRLF before */
        padding-top: 9px; /* align with elems in SP */
    }
    #nav, #nav ul { /* all lists */
        padding: 0;/*remove list indentation*/
        margin: 0;
        list-style: none;/*remove list o*/
    }

    #nav a {
        display: block;
    }

    #nav li { /* all list items */
        width: 179px; /* width needed or else Opera goes nuts */
    }

    #nav li ul { /* second-level lists */
        position: absolute;
        left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
        padding-right : 1px;/*spacing between levels*/
        min-width: 163px;
        z-index: 99; /*in front*/
    }
    #nav li ul a {
        text-decoration: none; /*remove underline*/
        color: #B3C7DE;/*lightgrey*/
        border: 1px solid #B3C7DE;/*lightgrey*/
        background: #21374C;/*darkpurple*/
        padding-left: 4px;
        padding-top: 2px;
        padding-bottom: 4px;
    }
    #nav li ul a:hover {
        background: #D4E0EE;/*l.lightgrey*/
        color: #21374C;/*darkpurple*/
    }
    #nav li ul ul { /* third-and-above-level lists */
        margin: -21px 0 0 179px;
    }

    #nav li:hover ul ul, #nav li.sfhover ul ul {
        left: -999em;/*hide*/
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
        left: auto;
    }
--></style>
<pre>
<script type="text/javascript">// <![CDATA[
//--><![CDATA[//><!--
    // Javascript originally by Patrick Griffiths and Dan Webb.
    // http://htmldog.com/articles/suckerfish/dropdowns/
    sfHover = function () {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i = 0; i < sfEls.length; i++) {             sfEls[i].onmouseover = function() {                 this.className += " sfhover";             };             sfEls[i].onmouseout = function() {                 this.className = this.className.replace(new RegExp(" sfhover\\b"), "");             };         }     };     if (window.attachEvent) window.attachEvent("onload", sfHover);     //--><!
// ]]></script>

SP Suckerfish 2LevelS Dropdown Tester</pre>
<div class="ms-globalnavsearch flowleft">Left of dropdown</div>
<div id="navbar">
<ul id="nav">
	<li><img alt="Projects" src="/_layouts/images/If.Portal.MyIf.Customization/dropdown.gif" />
<ul>
	<li><a href="#">Wrstyh</a>
<ul>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Echeneis</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Phtheirichthys</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Remora</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Remorina</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Rhombochirus</a></li>
</ul>
</li>
	<li><a href="#">Guikg</a>
<ul>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Caulolatilus</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Lopholatilus</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Malacanthus</a></li>
</ul>
</li>
	<li><a href="#">Fgjh</a>
<ul>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Scombrops</a></li>
	<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">Sphyraenops</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
bla-bla</div>
<pre>

2 Level Suckerfish Dropdown – with 5 latest on top

This version differs from the one above that it has a recent list above the 2 level dropdown menu.

2 level dropdown w. 5 latest

You can find it on http://jsfiddle.net/rasor/gRF3z/embedded/result/ too, but of some reason the recent list don't work out there.

<!DOCTYPE html>
<!-- saved from url=(0068)http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
              <title>SP Suckerfish 2LevelS Dropdown - with 5 latest - Tester</title>




<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">




    body {
        font-family: Verdana, Arial, sans-serif;
        font-size: 8pt;
        color: #676767;
    }




    #content {
        clear: left;
        color: #cccccc;
    }
    .flowleft {
        float:left; /* enable inline flow to the right */
    }
</style>




<style type="text/css">
    /* These styles create the dropdown menus. */
    /*#s4-workspace {}*/
    #navbar {
        /* http://css-tricks.com/fighting-the-space-between-inline-block-elements */
        /*display: inline-block;*/ /* remove CRLF before */
        float: left; /* Enables margin */
        margin-top: 9px; /* align with elems in SP */
    }
    #nav { /* all lists */
        position: absolute; /* don't move content following */
        z-index: 99; /*in front*/
    }
    #nav, #nav ul { /* all lists */
        padding: 0;/*remove list indentation*/
        margin: 0;
        list-style: none;/*remove list o*/
    }




    #nav a {
        display: block; /* unhide */
    }




    #nav li { /* all list items */
        width: 179px; /* width needed or else Opera goes nuts */
    }




    #nav li ul { /* second-level lists */
        padding-right : 1px;/*spacing between levels*/
        min-width: 163px;
    }
    #navmenu {
        position: relative; /* stack menus below */
        z-index: 99; /*in front*/
    }
    .lev2 {
        display: none; /* hide lev2 */
    }
    .lev2 li ul { /* 3rd-level lists - hide */
        position: absolute;
        z-index: 99; /*in front*/
        left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    #nav li ul a { /* style all menu li's */
        text-decoration: none; /*remove underline*/
        color: #B3C7DE;/*lightgrey*/
        border: 1px solid #B3C7DE;/*lightgrey*/
        background: #21374C;/*darkpurple*/
        padding-left: 4px;
        padding-top: 2px;
        padding-bottom: 4px;
    }   
    #nav li.divider { /* style menu li divider */
        height: 3px;
    }   
    #nav li.divider a{ /* style menu li divider */
        background: #B3C7DE;/*lightgrey*/
    }   
    #nav li ul a:hover { /* brighten hovered li */
        background: #D4E0EE;/*l.lightgrey*/
        color: #21374C;/*darkpurple*/
    }
    #nav li ul ul { /* 3rd-level lists */
        margin: -21px 0 0 179px; /*t r b l*/
    }




    #nav li:hover ul ul, #nav li.sfhover ul ul {
        left: -999em;/* hide lists 2 levels under hovered */
    }




    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { 
        left: auto; /* show lists directly under hovered */
        display:block; /* unhide lev2 */
    }
</style>




<script type="text/javascript"><!--//--><![CDATA[//><!--
    // Javascript originally by Patrick Griffiths and Dan Webb.
    // http://htmldog.com/articles/suckerfish/dropdowns/
    sfHover = function () {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function() {
                this.className += " sfhover";
            };
            sfEls[i].onmouseout = function() {
                this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
            };
        }
    };
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]>
</script>




<script type="text/javascript">
    //from TypeScript \Js\WebLink.ts
    var WebLink = (function () {
        function WebLink(href, title) {
            this.href = href;
            this.title = title;
        }
        WebLink.prototype.isEqual = function (o) {
            return (this.href == o.href && this.title == o.title);
        };
        return WebLink;
    })();




    $(function () {
        //Make sure methods are available for old browsers
        EnsureArrayMethods();




        //Build NavigationMenu for latest
        BuildNavLatest();
        AddClickEventToProjectLinks();




        //Called from clicks in navdropdown
        function OnProjectLinkClick() {
            itm = this;
            //alert("Clicked on: Url: " + itm.href + " - Txt: " + itm.innerText);




            try {
                //convert link to obj
                var link = new WebLink(itm.href, itm.innerText);




                /* Pseudo: Save link to webstore: 
                read from store
                if link exists then delete link
                push new link to top and save to store
                */
                var jsNavLatest = null;
                var aNavLatest = null;
                //One JSON item: {"href":"http://htmldog.com/bones2.html#","title":"Echeneis"}
                //Restore from store
                jsNavLatest = localStorage.getItem("aNavLatest");
                //debugger;
                if (jsNavLatest) {
                    //Restore to array
                    aNavLatest = JSON.parse(jsNavLatest);
                }
                if (aNavLatest && Array.isArray(aNavLatest)) {
                    //debugger;
                    var found = false;
                    var containedLink = aNavLatest.some(function (row, idx, arr) {
                        if (!found && link.isEqual(row)) {
                            found = true;
                            //Remove the link, so it can be pushed to top
                            arr.splice(idx, 1);
                        }
                        return found;
                    });
                } else {
                    //Create arr 
                    aNavLatest = new Array();
                }
                //push itm to top
                aNavLatest.push(link);
                //Remove oldest elems from bottom when more then 5
                if (aNavLatest.length > 5) {
                    aNavLatest.shift();
                }
                //Backup arr
                jsNavLatest = JSON.stringify(aNavLatest);
                localStorage.setItem("aNavLatest", jsNavLatest);
            } catch (e) {
            }
        }




        function BuildNavLatest() {
            //alert("4");
            /* Pseudo:
            read links from webstore
            */
            try {
                //localStorage.clear();
                var jsNavLatest = null;
                var aNavLatest = null;
                //One JSON item: {"href":"http://htmldog.com/bones2.html#","title":"Echeneis"}
                //Restore from store
                jsNavLatest = localStorage.getItem("aNavLatest");
                if (jsNavLatest) {
                    //Restore to array
                    aNavLatest = JSON.parse(jsNavLatest);
                }
                if (aNavLatest && Array.isArray(aNavLatest)) {
                    aNavLatest.forEachRev(function (row, idx, arr) {
                        $("<li><a href='" + row.href + "'>" + row.title + "</a></li>").appendTo("#navlatest");
                    });
                }




                //$("<li><a href='http://test1'>test1</a></li>").appendTo("#navlatest");




            } catch (e) {
                //alert("4 " + e.Message);
            }
        }




        function AddClickEventToProjectLinks() {
            try {
                //Find all projlinks link and add onclick
                //select all links in lists under navdropdown
                $(".lev2 ul a").click(OnProjectLinkClick); //OK for IE9
            } catch (e) {
                //alert("5 " + e.Message);
            }
        }




        //Make sure each() method is available
        //https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
        function EnsureArrayMethods() {
            if (!Array.prototype.forEach) {
                Array.prototype.forEach = function (fn, scope) {
                    for (var i = 0, len = this.length; i < len; ++i) {
                        fn.call(scope, this[i], i, this);
                    }
                }
            }
            if (!Array.prototype.forEachRev) {
                Array.prototype.forEachRev = function (fn, scope) {
                    //Read top to bottom
                    for (var i = this.length - 1, bot = 0; i >= bot; --i) {
                        fn.call(scope, this[i], i, this);
                    }
                }
            }
            if (!Array.isArray) {
                Array.isArray = function (vArg) {
                    return Object.prototype.toString.call(vArg) === "[object Array]";
                };
            }
            if (!Array.prototype.some) {
                Array.prototype.some = function (fun /*, thisp */) {
                    "use strict";




                    if (this == null)
                        throw new TypeError();




                    var t = Object(this);
                    var len = t.length >>> 0;
                    if (typeof fun != "function")
                        throw new TypeError();




                    var thisp = arguments[1];
                    for (var i = 0; i < len; i++) {
                        if (i in t && fun.call(thisp, t[i], i, t))
                            return true;
                    }




                    return false;
                };
            }
        }
    });








</script>
    
    </head>




    <body>
        <p>SP Suckerfish 2LevelS Dropdown - with 5 latest - Tester</p>




<div class="ms-globalnavsearch flowleft">Left of dropdown</div>
<div id="navbar">
<ul id="nav">
    <li><img alt="Projects" src="/_layouts/images/dropdown.gif" />
        <div id="navmenu">
            <ul id="navlatest" class="lev2">
                <!--<li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">1stfghstgh</a></li>
                <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">2uyhujdhgfd</a></li>
                <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">3cvsdfg</a></li>
                <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#">4erdtr</a></li>-->
            </ul>
            <ul id="navdropdown" class="lev2">
                <li class="divider"><a href="#"></a></li>
                <li><a href="#">Wrstyh</a>
                    <ul>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#1">Echeneis</a></li>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#2">Phtheirichthys</a></li>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#3">Remora</a></li>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#4">Remorina</a></li>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#5">Rhombochirus</a></li>
                    </ul>
                </li>
                <li><a href="#">Guikg</a>
                    <ul>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#6">Lopholatilus</a></li>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#7">Malacanthus</a></li>
                    </ul>
                </li>
                <li><a href="#">Fgjh</a>
                    <ul>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#8">Scombrops</a></li>
                        <li><a href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html#9">Sphyraenops</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>








<div id="content">
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
    <p>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-</p>
</div>

    </body>
</html>

The End

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: