lukaszfiszer / selectnav.js Goto Github PK

Hi

i'm using your plugin to do a responsive nav on a drupal website.So i created a block with this code into:
`

and using as you say :
adding js file via the .info drupal theme file : ok
adding script like:
<script>selectnav('.horizontal-nav'); </script>

but no select created with the selectnav class.

what is missing ?

thanks

I have a blog which is hosted over blogger. I found an issue some time ago that keeps on bothering me. The top menu bar of my blog starts showing a blank option when it is opened on a mobile or the page is zoomed in. The blank option when clicked redirects to a 404 error page.

Please help me out to fix this.

You can visit my blog from here.
Here is the template file of my blog.

Thank you

Regards

Prateek Singh

Hi Lukasz,

I just can't get selectnav to work. I've installed it on my demosite and it just won't work. I've walked through the 4 steps like 20 times, to make sure I did not mess it up. But I named the nav id="nav", I the CSS (both default and mobile), loaded the script (tried with the DOM ready, without the DOM, and at the bottom of the site).

It still won't work as it still shows the original menu. It seems like it doesn't apply the class to menu. Check it out at http://kennethdanielsen.dk/new/index.html and tell me what I do wrong.

Thanks in advance!

• Kenneth

This is a very nifty feature, but for some reason it's not working on the internal pages of my site:

if you look at http://1014retold.com/site/meet-the-team/ and resize screen to mobile size, you'll see that both the original and the selectnav are appearing. I'm a newbie, and I'd love some help with how to fix this.

It's working fine on the homepage http://1014retold.com/site/.

The site is built using a Wordpress Theme, Cabana.

Any advice on what I need to fix here to get this working as it should?

Hello, first I would like to thank you for this wonderful plugin.

Unfortunately I can not make it work in any way

The console shows me two errors:

Uncaught ReferenceError: selectnav is not defined index.html: 453
Uncaught ReferenceError: selectnav is not defined custom.js: 22

<ul class="nav" id="navs">
                            <li>
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#">Sliders</a>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    Pages
                                    <i class="icon-caret-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-submenu">
                                        <a>Example</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="">Asd</a></li>
                                            <li><a href="">Asd</a></li>
                                            <li><a href="">Asd</a></li>
                                            <li><a href="">Asd</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a>Example</a>
                                    </li>
                                    <li>
                                        <a>Example</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Features</a></li>
                            <li><a href="#">Shortcodes</a></li>
                            <li><a href="#">Why Me ?</a></li>
                        </ul>

        <script src="http://code.jquery.com/jquery.js"></script>
    <script type="js/selectnav.min.js"></script>
    <script>selectnav('nav');</script>
    <script src="js/custom.js"></script>

Css

/* default style */
.selectnav { display: none; }

/* small screen */
@media screen and (max-width: 600px) {
  .js #nav { display: none; }
  .js .selectnav { display: block; }
}

JS in custom.js

selectnav('nav');

I hope you can help me because I'm completely stuck with my work.

Thanks in advance

May be there should be option to exclude the certain links from adding into the created navigation menu. Like there should be class called exclude which will eliminate the addition of particular area into the responsive menu.

Sir, Your plugin is installed in my blogger theme and it's great. But someday ago I found some issue in it. When you open up the nav-bar in the mobile version of the site, it shows a blank option. I want to remove it, please help me out.

I am leaving the address of my blog site. The top menu is having that problem in the mobile view of the site. www.programmics.in

Regards,
Prateek Singh.

hello plz i wanted to use selectnav with bootstrap, i've removed the collapse menu and added the script and everything but its not showing, plz any help?

Can you provide a way to turn non-linked list items into optgroups so they aren't selectable? or maybe provide a class for list items that shouldn't be selectable when converted into a select list.

It works on main page but doesn't work when the user navigates in another page.
Correction:It seems that if I add a script inside the post, the javascript for the navigation isn't working, even thought they are completely different. my site is http://spotlightsontheredhead.blogspot.com/ if it helps you understand what I mean. Seems like it has trouble playing along with the lookbook widget.

I am completely stuck. I have tried everything I know and many Google searches. I have selectnav.js set up on a test site while I am learning responsive coding. The site is WordPress based, self hosted. I have the code working properly, however rather than the pages showing up one underneath each other, list style, the pages show in one line and are not click-able.

I have removed all css except the relevant js.nav stuff, it is not that.
I have tested it with a manual list rather than 'main_menu')); ?> it works fine.

From this I must conclude that the problem is the line calling the menu. I have also tried just using a plain wp_get_pages command, that isn't working either.

One thing i have noticed, is that while it is

because I am calling a named menu, it is adding <ul id"menu-main-menu"> to the code. I have since tried naming the replacement id to menu-main-menu but it still doesn't work, in that instance, it simply shows nothing.

I am at my wits end with this. If you have any ideas, I would be very grateful. If you want to see the original files, email me privately and I will get you an admin login so you can see for yourself.

http://2dragons-playground.net/demosites/responsive/

Many thanks for any help or ideas you can offer. If you need more information, please don't hesitate to contact me.

I try to modifiy selectnav.min.js to make active the cross to close the menu. When I press the TAB key, the cross focus in. When I press "return" nothing append.

http://equalitylawclinic.ulb.be/

We are using this library in Commerce Kickstart Drupal, and would like to rely on a specific version for easier testing and upgrading. Could you please tag a version.

I have two main nav's and I have set both to have the same id "nav" but when the drop down is active it only takes the first nav...is there a way I can combine both into ONE dropdown?

Thanks in advance!

Hi,

I've got a kind-of megamenu.

The html looks more or less:

ul class="...." id="..."
li
span
h2
item 1
br/
/h2
span
item 1 subtitle
/span
/span
div class="..."
div class="...."
img ....
/div
div class="...."
div class="...."
h3
subtitem1
/h3
ul
li
h4
a href="#"
subsubitem1
/a
/h4
/li
/ul
/div
/div
/li
/ul

The issue is that selectnav detects delivers a drop down only with the first level elements

item1 item1subtitle,

what I wanted was:

item1 item1subtitle

• subitem1
  
  -- subsubitem1

Is it possible?

Thanks in advance

hi! great job you did here...i would like to know how to use it in joomla based menu. im not a specialist in coding. thank you!

The Code "link.parentElement." in line 110 , it is not compatible on FF

It can be replace with "link.parentNode"

Using selectnav.js downloaded on 18th June 2012 at 1030, testing integration with jQuery Mobile 1.1.0 for use in a mobile website/phoneGap application. Testing via Chrome beta browser on Android ICS.

HTML:

<ul id="nav">
   <li><a href="03_intro.html#intro" class="act">Introduction</a></li>
   <li><a href="03_intro.html#tells">About the game</a></li>
   <li><a href="03_intro.html#structure">From Structure to Story</a></li>
   <li><a href="03_intro.html#chapters">Chapters in this app</a></li>
   <li><a href="03_intro.html#modes">Styles of Play</a></li>
</ul>

JS:

selectnav('nav', {
   activeclass: 'act',
   label: false
});

HTML document is a jQuery Mobile multi-page document (so there are 5 nav bars, nav, nav1, nav2, etc., 1 in the header of each page div). When using the navigation dropdown in the header (which looks superb, by the way), sometimes the selected item will not be the page displayed - e.g. the page haeding might be "Chapters" but the navigation displays "Styles of Play". Navigation always takes you to the page you selected.

class="act" is set correctly on each page. This is an intermittent error that, while not preventing use, may introduce confusion to users.

I don't want all the nested elements of the navigation on a mobile as the select menu is too long. I have tried setting the nesting to false but it has not effect, am I doing this properly?

nested = typeof(o.nested) === "boolean" ? o.nested : false,

Thank you

Hello,

My ul/ol has certain list items with disabled="true" defined.
The same however is still selectable when the menu turns into a dropdown menu using selectnav.

How can the items where disabled=true be made non selectable?
Or Best is
How to exclude it completely from the drop[ down menu that gets generated.

TIA

It will be nice to be able to use selector instead of id in selectnav function. Several times, id is not available. To be able to pass jQuery selector will be very nice to have.

Hello

I want to create menu for WordPress ,Please provide be code how to do this.
when i add selectnav.js then three menu will show .

Hi,

I use the js to tranform an

static nav.In this static nav, i use an image that is replace by empty space in the mobile selectnav.
How can i replace the image by some text, like the title or alt attribute ?

Second point, i have an issue on a duplicate select nav on mobile..no way to know about the guilt..

thanks

I have list items with spans in them, and I'd like to strip the spans out before the list item is returned by selectnav, how do I go about this? eg

<li><a href="somelink.html">Chapter Here <span>description here</span></a></li>

selectnav returns the list item as Chapter Heredescriptionhere but I want to remove that description span.

Hope that makes sense.

Thanks.

Your demo site is not working.

I'm seeing the following errors in Chrome's web ispector:

Refused to execute script from 'https://raw.github.com/lukaszfiszer/selectnav.js/master/selectnav.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. lukaszfiszer.github.io/:1

Uncaught ReferenceError: selectnav is not defined lukaszfiszer.github.io/:23

Failed to load resource: the server responded with a status of 403 (Forbidden)

hiii,

when use selectnav , the ( label ) show in select but not be selected in first load index page ( homepage ) but the selected link is the first link after ( label ) ?

the select menu show in code that :

  <select class="selectnav" id="selectnav1">
  <option value="">- Navigation Menu - </option>
  <option value="index.html" selected="">Home</option>

you will see the class ( selected ) in Home link , not label link

my custom js using for selectnav :

jQuery(document).ready(function () {
selectnav('nav', {
label: '- Navigation Menu - ',
nested: true,
indent: '-'
});

});

my ul list structure example that :

         <ul id="nav" >
        <li><a href="index.html" class="active">Home</a>
          <ul>
            <li><a href="#1">Home 2</a></li>
            <li><a href="#2">Home 3</a></li>
            <li><a href="#3">Home 4</a></li>
            <li><a href="#4">Slider 1</a></li>
            <li><a href="#5">Slider 2</a></li>
            <li><a href="#6">Slider 3</a></li>
          </ul>
        </li>
        <li><a href="#7">Pages</a></li>
        <li><a href="#8">Features</a></li>
        <li><a href="#9">Portfolio</a> </li>
        <li><a href="blog.html">Blog</a> </li>
        <li><a href="contact.html">Contact</a></li>
      </ul>

I'm experimenting with this navigation in a responsive layout. Is it possible to copy the classes of the li's to the select items? And if it is, can you point me in the right direction?