Codrops Horizontal drop down menu with wayfinder

19 Posts

louveblr Reply #11, 11 years, 5 months ago

https://jinini.com/
This is my website where I try to implement this menu

180 Posts

troubadour Reply #12, 11 years, 5 months ago

be sure to set the link attributes field to rel="category" for "<h4>"titles of the exemple

and try at first to simplify your wayfinder call :

<nav id="cbp-hrmenu" class="cbp-hrmenu">[[Wayfinder? &startId=`[[*id]]` &parentRowTpl=`parentRow` &categoryFoldersTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]</nav>

instead of :

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="[[++site_url]]"><img src="[[++assets_url]]templates/bootstrap/img/logo.png" width="90" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
[[Wayfinder?
&startId=`0`
&parentRowTpl=`parentRowTpl`
&categoryFoldersTpl=`innerTpl`
&innerRowTpl=`innerRowTpl`
]]
</nav>
</div><!--/.nav-collapse -->
</div>
</div>

19 Posts

louveblr Reply #13, 11 years, 5 months ago

Did as you said. It was so ..
https://jinini.com/
There is a feeling that does not work for some reason, the scripts menu: (

180 Posts

troubadour Reply #14, 11 years, 5 months ago

you must add this before end body tag :

<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>

180 Posts

troubadour Reply #15, 11 years, 5 months ago

you also have multiple errors, which might be a separate problem but better fixing them...

Mixed Content: The page at 'https://jinini.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lato:300,400,700'. This request has been blocked; the content must be served over HTTPS.
https://jinini.com/index.php?q=assets/templates/bootstrap/fonts/fontawesome.woff Failed to load resource: the server responded with a status of 404 (Not Found)
https://jinini.com/index.php?q=assets/templates/bootstrap/fonts/fontawesome.ttf

Failed to load resource: the server responded with a status of 404 (Not Found)
index.php:1 GET https://jinini.com/index.php?q=assets/components/bootstrap/vendor/js/jquery.min.map 404 (Not Found)

19 Posts

louveblr Reply #16, 11 years, 5 months ago

Put a piece of script in the body.

<nav id="cbp-hrmenu" class="cbp-hrmenu">[[Wayfinder? &startId=`[[*id*]]` &parentRowTpl=`parentRowTpl` &categoryFoldersTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]</nav>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>

Now all this way https://jinini.com/
ModX Revolution

180 Posts

troubadour Reply #17, 11 years, 5 months ago

no you must put it at the end, with your other scripts...

and check that you load a proper jquery before this script.

19 Posts

louveblr Reply #18, 11 years, 5 months ago

jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The script is inserted next to the other are known to work

<!-- Script -->
<!-- Script Bootstrap -->
<script src="[[++assets_url]]components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Script Tooltip -->
<script>
	$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
<!-- Script Off -->
[[$YandexMetrika]]

Why then stopped working right mouse button on my website.
I know for sure that the problem is minor, but I can not win.
Still does not work: (

19 Posts

louveblr Reply #19, 11 years, 5 months ago

Menu is generated so now here

<nav id="cbp-hrmenu" class="cbp-hrmenu"><ul><li class="first"><a href="https://jinini.com/" title="Home" >Home</a></li>
<li><a href="gallery/">Gallery</a>
    <div class="cbp-hrsub">
        <div class="cbp-hrsub-inner"> 
            <ul><div>
  <h4>Photography</h4>
    <ul>
        <ul><li>
<a href="gallery/photography/events.html" >Events</a>

</li>
<li>
<a href="gallery/photography/kids.html" >Kids</a>

</li>
<li>
<a href="gallery/photography/love-story.html" >Love Story</a>

</li>
<li>
<a href="gallery/photography/portraits.html" >Portraits</a>

</li>
<li>
<a href="gallery/photography/weddings.html" >Weddings</a>

</li>
</ul>                    
    </ul>
</div>
<div>
  <h4>Painting</h4>
    <ul>
        <ul><li>
<a href="gallery/painting/portrait.html" >Portrait painting</a>

</li>
</ul>                    
    </ul>
</div>
<div>
  <h4>Video</h4>
    <ul>
        <ul><li>
<a href="gallery/video/kids-video.html" >Kids</a>

</li>
</ul>                    
    </ul>
</div>
<div>
  <h4>CG graphics</h4>
    <ul>
        <ul><li>
<a href="gallery/cg/key-art.html" >Key Art</a>

</li>
</ul>                    
    </ul>
</div>
</ul>
        </div><!-- /cbp-hrsub-inner -->
    </div><!-- /cbp-hrsub -->
</li>
<li><a href="blog/" title="Blog" >Blog</a></li>
<li class="last"><a href="http://forum.jinini.com/" title="Forum" >Forum</a></li>
</ul></nav>

180 Posts

troubadour Reply #20, 11 years, 5 months ago

try disabling other css/js files...
try with very minimal files, no boostrap, no fancybox,... nothing but menu !

it is working on my site so it must work here