How To Install Fixed Menu Slide-Out Navigation

Written by : Precious Pinkest | 10:54:00 AM | 6

♥ ASSALAMUALAIKUM ♥

Good morning all, .. this morning after opening my blog, I looked there is someone left message on my chatbox Again..Said “ wow! mcmana mau buat yg pages di atas tu jadi begitu ?. lawaaaa ^^ yg home, about tu. ajar ^^ “  Its about how to install Fixed menu navigation just like mine.Since I did not want to disappoint her, after all she was one of my WSB's Family..

Lucky day today is Saturday,not as much office work to do..This day tutorial requested by Adik Khansyaa @ IP .

beautifulslideoutnavigation

How to do it ;

pink01Log In Blogspot @ Click to Dashboard> Layout> Edit HTML> Tick Expand Widget Templates [make sure you first backup your template before  start of this tutorial ... if not so at least you already have backup template. Refer to the image below

edithtml
pink02 Find the code ]]></ b:skin by using the box find [Ctrl + F].

skin


pink03 Copy and paste the code below, on or before the code ]]></b:skin

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#ffffff url(Your Link Image) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/s1600/mail.png);
}

#ffffff - you can change the colour whatever you want..Click Here

✿✿ (Your Link Image) - you have to put a link of your image in case you want a background when your mouse hover on the box

✿✿✿ #000 - you change according to your desired section.

✿✿✿✿ 1px solid #BDDCEF - Change the border size,Border Type And Border Color

✿✿✿✿✿ 11px - Change The font size

✿✿✿✿✿✿ #FFF - Change The Font size colur

pink04 And save this script below above the code </ head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://pinkdiva.googlecode.com/files/beautifulnavigation.js'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $(&#39;#navixed a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navixed &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>

pink05 Finally save the following code above the code <body>

<ul id='navixed'>
            <li class='home'><a href='Your Own Link'><span>Home</span></a></li>
            <li class='about'><a href='Your Own Link'><span>About</span></a></li>
            <li class='search'><a href='Your Own Link'><span>Search</span></a></li>
            <li class='photos'><a href='Your Own Link'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='Your Own Link'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='Your Own Link'><span>Podcasts</span></a></li>
            <li class='contact'><a href='Your Own Link'><span>Contact</span></a></li>
        </ul>

Note : Change the Url Link Of Your Own link.

Done ... preview if there’s no error then save the template.

Note : You can change the picture / icon as you like..Find it Here and Here
Sharing The Love :)

6 comments:

  1. ala hai....susah lah buka web awk ini..buka ape..lambat loading.....sorry ye....lagi satu...susuah nak baca entri awk....bintang-bintang ini hehehe....kacau sikit....Sorry ye..kerna tegur.....

    ReplyDelete
  2. @cayob

    hahaha !!!.. I know my page is slow loading for Those users, i dont know what's wrong.but its ok .. I get it, as long as I'm happy with the blog I have now.

    One more thing about my background have been troubled you to read my entries,I think you're just the one whos got problems with this...

    Anyway, thank you for your comments and spent your time here..:)

    ReplyDelete
  3. akak. problem dia kan, nanti tak keluar box mcm akak tum just keluar words je, mcm about, search, then bila tekan, takde effect. HEHE. dah try search google, tapi tak jumpa tutorial lain ~

    ReplyDelete
  4. hmm about just keluar words jew,image takde kan?..means ayat yg adik letak kat Step 3 : ul#navixed .home a{
    background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);..contoh yg kod ni.. ( .home ) ayat home tue kena sama cara tulisanya dgn ayat home di Step 5 class='home'>

    if huruf besar,all pun kena huruf besar gak and vice versa..

    then about bila tekan takde effect,means adik belum letak link yang betul pada Step 5.

    Tidak faham,adik tanya akak balik..:)

    ReplyDelete
  5. dah dapat kot ^^ tapi nak buat balik. yg # tu lupa nak letak url. hoho. thanx akak ^^

    ReplyDelete
  6. Its ok dear..pape tak faham just inform akak tau..:)

    Goodluck!!

    ReplyDelete

Note : All comments are moderated manually by real humans, so you won't see them appearing immediately.

For Non-Bloggers
Please select profile & click "Name/URL" If you do not have any profiles on any those listed. (Leave the URL empty).

It's harsh to call you Anonymous , So please Leave at least a Name.