Site Navigation Module

[LaBella]

OK- I do not know if it a Firefox thing or what, but my set up looks different.


Can I just click on this general "use default options" box? Sorry to be such a pest, but this is friggin KILLING me!

[LaBella]

Originally Posted by Dragonsys

ACP -> vBa CMPS -> Edit Pages -> Homepage -> Advanced Options -> Site Navigation Options

check all of the Use Default boxes (should be 4 of them) and then click on Save

YOU are a life saver! I broke down (emotionally) and opened up the page with IE (it did indeed feel dirty) and there were red x's to open up the settings and do as you said. I owe you ONE, big time! It finally works.


God, do I owe you a solid, thanks SO MUCH for bearing with me and all of my tardishness! I wonder why the code doesn't work in Firefox, I wonder about other browsers?!

Either way, you have a special place in Valhalla waiting for you and your patience.



RL

[Dragonsys]

Firefox does not display the Red X's

You are missing some images, I know I have seen posts around here about the collapse button missing...

[LaBella]

Originally Posted by Dragonsys

Firefox does not display the Red X's

You are missing some images, I know I have seen posts around here about the collapse button missing...

Nor Opera. My 2 browsers of choice.

[thecore762]

Wow, I didn't even know this thread existed, whats up guys?
I am the owner of the The 47 Ronin site: www.47r-squad.com

[TeknoSounds]

Originally Posted by thecore762

Wow, I didn't even know this thread existed, whats up guys?
I am the owner of the The 47 Ronin site: www.47r-squad.com

Hey! Everyone's been dying to ask...how do you do your stuff?!?

[SouthpawK]

Originally Posted by TeknoSounds

Hey! Everyone's been dying to ask...how do you do your stuff?!?

I agree. Actually he pointed me to the site with the code but it just left me confused...but I am still trying.

[Dragonsys]

it has to do with this class

class="sliding-element"

and the jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript">
var $sq = jQuery.noConflict();
$sq(document).ready(function() {
    $sq('#sliding-navigation').slide({
        time: 50,
        multiplier: .6
    });
    $sq(".tsktest").on({
        mouseenter:
            function() {
               var tid = $sq(this).attr("id");
               $sq(".tsk_prep #prep_"+tid).delay(1000).fadeIn(200);
            },
        mouseleave:
            function() {
                var tid = $sq(this).attr("id");
                $sq(".tsk_prep #prep_"+tid).fadeOut(200);
            }
    });    
});
</script> <script>
(function($) {
    $.fn.extend({
        slide: function(options) {
            var defaults = {
                pad_out: 25,
                pad_in: 15,
                time: 150,
                multiplier: .8
            }
 
            var ops = $.extend(defaults, options);
 
            return this.each(function() {
 
                var $list_elements = $(this).find('li');
                var $link_elements = $list_elements.find('a');
                var timer = 0;
 
                $list_elements.each(function() {
                    //$(this).css("margin-left","-180px");
                    timer = (timer*ops.multiplier + ops.time);
                    $(this).animate({ marginLeft: "1px" }, timer);
                    //$(this).animate({ marginLeft: "845px" }, timer);
                    $(this).animate({ marginLeft: "1px" }, timer);
                });
 
                $link_elements.each(function() {
                    $(this).hover(
                        function() {
                            $(this).animate({ paddingLeft: ops.pad_out }, 150);
                        },
                        function() {
                            $(this).animate({ paddingLeft: ops.pad_in }, 150);
                        }
                    );
                });
            });
        }
    });
})(jQuery);
</script>

[Dragonsys]

and the CSS (which I would put in the addtional.css template)

/*--------- sliding menu css ----------------*/ 

#navigation-block {
	position:relative;
	top:0px;
	left:0px;
       
}

ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 0px 0;
	padding: 0;
}

ul#sliding-navigation li.sliding-element h3{
       
        z-index:10000;
	display: block;
	width: 166px;
	padding: 5px 10px;
	margin: 0;
	margin-bottom: 0px;
}
ul#sliding-navigation li.sliding-element a{
        font-size:12px!important;
        z-index:10000;
	display: block;
	/*width: 155px;*/
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 0px;
}

ul#sliding-navigation li.sliding-element h3
{
	color: #c81919;font-size:12px;
        background-color:#550801;
        background-image: url(images/47ronind3/47ronind3_blockheadbg.png);
        background-repeat: repeat-x;
        font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
	color: #CCC;
        background-color:#060606;
        background-image: url(images/47ronind3/47ronind3_alt1.png) ;
        background-position:bottom left;
        background-repeat: repeat-x;
	border: 1px solid #1b1814;
	text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #c81919; }


/* newpage */
.newpagewrap{
	height: auto;
	width: 100%;
        position:relative;clear:both;
}
.newpageL {
	height: auto;
	float: left;
	width: 190px;
	
}
.newpageC{  
    vertical-align:top;
	margin-top: 0;
	margin-right: 190px;
	margin-bottom: 0px;
	margin-left: 190px;

}

.newpageR {
	position:relative;
	height: auto;
	float: right;
	width: 190px;

}

[LaBella]

You guys are too smart for me!

[thecore762]

Originally Posted by Dragonsys

and the CSS (which I would put in the addtional.css template)

/*--------- sliding menu css ----------------*/ 

#navigation-block {
	position:relative;
	top:0px;
	left:0px;
       
}

ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 0px 0;
	padding: 0;
}

ul#sliding-navigation li.sliding-element h3{
       
        z-index:10000;
	display: block;
	width: 166px;
	padding: 5px 10px;
	margin: 0;
	margin-bottom: 0px;
}
ul#sliding-navigation li.sliding-element a{
        font-size:12px!important;
        z-index:10000;
	display: block;
	/*width: 155px;*/
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 0px;
}

ul#sliding-navigation li.sliding-element h3
{
	color: #c81919;font-size:12px;
        background-color:#550801;
        background-image: url(images/47ronind3/47ronind3_blockheadbg.png);
        background-repeat: repeat-x;
        font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
	color: #CCC;
        background-color:#060606;
        background-image: url(images/47ronind3/47ronind3_alt1.png) ;
        background-position:bottom left;
        background-repeat: repeat-x;
	border: 1px solid #1b1814;
	text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #c81919; }


/* newpage */
.newpagewrap{
	height: auto;
	width: 100%;
        position:relative;clear:both;
}
.newpageL {
	height: auto;
	float: left;
	width: 190px;
	
}
.newpageC{  
    vertical-align:top;
	margin-top: 0;
	margin-right: 190px;
	margin-bottom: 0px;
	margin-left: 190px;

}

.newpageR {
	position:relative;
	height: auto;
	float: right;
	width: 190px;

}

Thanks!

[thecore762]

I might consider releasing the XML to the public for easier install. The whole thing was customized for my needs, so I wouldn't know if it would match with everyone's site.

[SouthpawK]

OK...just a couple stupid newbie questions.....

Do I need to make a new file to put the jquery stuff in? Also, is the something that you have to download and upload for the jquery? Told you they were stupid newbie questions.

And do you just make and upload a color block for the links to come out from? If so, what size should the block be?

And how can I change the color of the menu itself and/or the tiltle bars like "Homepage" on the 47 Ronin site?

I'm getting there but need these answers, please.

Thank you...

[Dragonsys]

Originally Posted by SouthpawK

OK...just a couple stupid newbie questions.....

Do I need to make a new file to put the jquery stuff in? Also, is the something that you have to download and upload for the jquery? Told you they were stupid newbie questions.

And do you just make and upload a color block for the links to come out from? If so, what size should the block be?

And how can I change the color of the menu itself and/or the tiltle bars like "Homepage" on the 47 Ronin site?

I'm getting there but need these answers, please.

Thank you...

Put the jquery code in your headerinclude template. Nothing to download, just copy & paste it.

It is CSS, any images used are listed inside of the above CSS code

Edit the CSS code posted above to match the colors of your site.

[SouthpawK]

Originally Posted by Dragonsys

Put the jquery code in your headerinclude template. Nothing to download, just copy & paste it.

It is CSS, any images used are listed inside of the above CSS code

Edit the CSS code posted above to match the colors of your site.

Great...thank you. I'm going to give this a try tomorrow and hopefully I get it right. With your answer and all the others maybe I won't have any problems.

Thanks again...

[Dragonsys]

Originally Posted by SouthpawK

Great...thank you. I'm going to give this a try tomorrow and hopefully I get it right. With your answer and all the others maybe I won't have any problems.

Thanks again...

Good luck let us know how it goes

[thecore762]

So...how things go for you guys?
Is it working for you guys?

[wolfman069]

it toke me awhile to work it out but i love it thanx thecore762

[thecore762]

Originally Posted by wolfman069

it toke me awhile to work it out but i love it thanx thecore762

Anytime!
Wanna send me the link so I can check it out too? :P

[wolfman069]

its been sent ive done some modifying to suit my theme but works great.