Priority+ Scrolling Menu - Modified to include Non-Scrolling Elements

Hello everybody!

I really like the Priority+ and horizontal scrolling navigation concepts of Dynamic Drive's Priority+ Scrolling Menu. Noticing this excellent script does not provide for non-scrolling elements, I attempted to modify it to enable the inclusion of non-scrolling items for a home icon, dropdown menu, etc.

Here is the script information:

1) Priority+ Scrolling Menu

2) http://www.dynamicdrive.com/dynamici...scrollmenu.htm

3) In the HTML I added a span to the priorityscroll div ul:

Code:

---

        <div id="priorityscroll">
          <ul> 
            <li><a href="/"><i>home</i></a></li>
            <SPAN> 
              <li><a href="#">Link 1</a></li> 
              <li><a href="#">Link 2</a></li> 
              <li><a href="#">Link 3</a></li>
            </SPAN>
          </ul>
        </div>

---

In the javascript I edited priorityscroll.js line 67 to change the querySelector() value from 'ul' to 'span':

Code:

---

        before: var hamburgermenu = priorityscroll.querySelector('ul')
        after:  var hamburgermenu = priorityscroll.querySelector('span')

---

With these changes the first li is static and the span contents scroll. Nice, right? But not so fast! Now the span contents visibly scroll through the static li. Changing the z-index values of the static li and span did not resolve the issue. I am not proficient in javascript, so any pointers or assistance would be great!

Well, first of all, that's invalid HTML. Only li elements may be the direct children of a ul element. But that might not be the issue. Still I would try markup like so:

Code:

---

        <div id="priorityscroll">
          <span><a href="/"><i>home</i></a></span>
          <ul> 
              <li><a href="#">Link 1</a></li> 
              <li><a href="#">Link 2</a></li> 
              <li><a href="#">Link 3</a></li>
          </ul>
        </div>

---

Leave the script as it originally was. Then, in the stylesheet, add whatever styles are needed to get your fixed span to look and behave as desired.

Another option would be to create the fixed link outside the menu entirely:

Code:

---

        <span id="fixedlink"><a href="/"><i>home</i></a></span>
        <div id="priorityscroll">
          <ul> 
              <li><a href="#">Link 1</a></li> 
              <li><a href="#">Link 2</a></li> 
              <li><a href="#">Link 3</a></li>
          </ul>
        </div>

---

Again, leave the script itself as it originally was, and use style to get the span to look and act as desired.

If you want more help, please post a link to the page on your site with the problematic code.