Vertical Hover Menu on TLN !!

Hi all,
well, i have developed a vertical hover menu for my portal by following a blog posted here on SDN, but somehow my requirement is not getting fullfill, i want the TLN to be more interactive and more attrative, i have coded a css file also and after total 3 days of trying with many options i am left no clue at all,
For reference here is something i am trying to do like :
http://www.ibsolution.de
I tried using the css property for displaying an image in TLN :
BACKGROUND: url(/images/ameya.gif) fixed;
But it is not working, any help on how can i change the shapes of TLN like the above mentioned site has?
What changes in CSS is to be made? If anyone has done this then kindly help me in solving this probelm..
Kindly put your thoughts as i am running out of the time !!
Thanks in advance..
Regards,
Ameya

Hi Ameya,
In the page you are refering to (http://www.ibsolution.de) the TLN is implemented in Adobe Flash with "last minute data injection".
This means that the framework for this TLN is implemented in flash but that the TLN data is coning from the TAG libs....
The best you could do without using flash is to add some fancy javascript...
Maybe the following website can provide you a good sample to build on:[http://www.dynamicdrive.com/dynamicindex1/|http://www.dynamicdrive.com/dynamicindex1/]
Cheers,
Benjamin Houttuin

Similar Messages

TLN hover menu enabled - can't select 1st level node

Hi,
I've enabled the hover menu for TLN, but now I can't select a 1st level node, only 2nd level ones. When I click on something on the first level, it just ignores it.
Is this how it's supposed to behave, and can I change it?
Many thanks
Jane

SAP have said this is how it is meant to work, but in some cases it makes the TLN harder to use.
How would I go able making the first-level tabs act the same way in the hover menu as they do normally?
Any help would be greatly appreciated!
Regards
Jane

Problem with Customised Hover Menu.

hi Experts,
I have implemented the drop down Hover menu for TLN using DIV tags. Generally the menu works fine but when the content area consists of a PDF of Flex Controls like VC iview the menu hides behind the PDF or Flex Controls.
Searched other threads but not able to understand what has to be done.
Would anyone please help me to handle this problem.
Points would be rewarded to helpful answers.
Regards,
AD.
Edited by: A D on Apr 16, 2008 12:31 PM

hi Experts,
Would any one please help me to solve this problem.
Its very Urgent.
Points would be rewarded to helpful answers.
Regards,
AD.

Hover Menu hiding behind the iview

Hi All,
I have implemented a Hover Menu for TLN in my portal.
the problem I am facing is that the Hover Menu hides behind,or is overlapped by the Flex Iview ,which is displayed in the portal content area.
This is undesirable,as the user then cant navigate in the hover menu.
The isolation property for the hover menu is embedded,while for the Flex Iview it is URL.These properties cant be changed.
Can anyone suggest how to overcome the problem without changing these properties.
Thanx.....
Edited by: Juhi Bhatnagar on Apr 9, 2008 11:32 AM

Hi Juhi Bhatnagar
i hope this might help you over come to the point you need
Use IFRAMES for External Content
This version of the tabbed UI looks and acts very much as if an <iframe> were embedded on the page. In fact, if you need to use external content for the panel contents, an <iframe> is extremely easy to implement. Just swap out the <div> elements with <iframe> elements, add a src attribute, and modify the tab text:
The extra <div> element in the preceding code that appears just after the <body> element displays while the browser fetches the external content. That way, users see something during the load process, which is usually a good idea, because users should know that the browser is working for them. Adding the extra <div> won't make the page load any faster but it will increase the user's perception of speed.
There are some obvious benefits of implementing a tabbed interface in this manner. Tabs let users navigate between content more easily than switching pages. Because tabs are relatively easy to implement, development time is short. Also, if you're using internal content, the pages load quickly. Switching from internal to external content is painlessjust change the panel <div> tags to <iframe> tags. Finally, the tabs provide state for the user and are visible at all times.
Thanks
Rajnikanth Dumpala

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

Scroll bar in the Hover Menu

Dear Expert,
We have implemented the Hover menu in our Netweaver Portal 7.01. Everything is working very fine but now we are coming across a problme for the users having roles more than 7. In TLN the roles come in 2 rows one after the another.When the users try to acess the submenu of the frole in the first row he has to struggle a lot, always the role in the 2nd row gets selected.
To fix this issue i am trying to create a scroll button at the end of the screen and the 2nd row role should come after this button instead of the 2nd row.
Any other solution is also welcome..
Thanks and Regards,
M.D.Sahu

Marilynn,
Hopefully, you will not have to go far down this general list.
You may try the following (you may have tried/done some of them already) and see whether it helps (the following is a general list of things you may try when the issue is not in a specific file; 3) and 4) are specifically aimed at possibly corrupt preferences):
1) Close down Illy and open again;
2) Restart the computer (you may do that up to 3 times);
3) Close down Illy and press Ctrl+Alt+Shift/Cmd+Option+Shift during startup (easy but irreversible);
4) Move the folder with Illy closed (more tedious but also more thorough and reversible);
5) Look through and try out the relevant among the Other options (Item 7) is a list of usual suspects among other applications that may disturb and confuse Illy);
Even more seriously, you may:
6) Uninstall, run the Cleaner Tool, and reinstall.
http://www.adobe.com/support/contact/cscleanertool.html

Spry Vertical Navigation menu with secondary flyout menu not showing

I'm using Windows and CS3. I have a vertical spry menu with one of the items opening to a secondary vertical menu. The menu is positioned left and I want the flyout menu to open so it can be seen on top of the central content column. I have a background color on the central div and when I hover over the item on the menu bar, you can't see the secondary menu opening. But I know it is there as I have removed the central div and when previewed in the browser (IE) it works fine. But when I replace the central div, the secondary menu is hidden again. I don't want to play around too much as I know Javascript is involved and I can easily ruin those elements which are now working. I hope someone can suggest something reasonably straight forward to assist.
The code is the standard stuff - I have only modified colours basicall with one or two other tweaks to fit the space:
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 200px;
background-color: #979c9c;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-color: #FFFFFF;
ul.MenuBarActive
z-index: 1000;
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;
color: #343642;
ul.MenuBarVertical ul
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 100%;
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
ul.MenuBarVertical ul li
width: 200px;
ul.MenuBarVertical ul
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #979c9c;
color: #343642;
text-decoration: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #343642;
color: #fff;
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #343642;
color: #fff;
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Thanks.

Frank,
The code that you have shown us re SpryMenuBarVertical.css is correct so that we can assume that the problem lies elsewhere.
Because you have not shown the rest of the code, we can only make assumptions which may or may not help. From the above screen shot, I see that you are using AP's (Absolute Positioned) elements. This is a NO NO!!!
Have a look at the following wich achieves the same, but without AP's. Just copy and paste in a new document and view in any browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    margin: 0;
    padding: 0;
html {
    height: 100%;
    background: #FFC;
body {
    width: 960px;
    margin: auto;
    background: #060;
h1, h2, h3, p {
    margin: 0 20px;
#header {
    height: 95px;
    background: #060;
#sidebarL {
    width: 160px;
    float: left;
    color: #CCC;
#content {
    width: 800px;
    float: left;
    background: #FFF;
#sidebarR {
    width: 200px;
    float: right;
    background: #FF3;
#footer {
    height: 50px;
    background: #060;
    color: #CCC;
    clear: both;
</style>
</head>
<body>
<div id="header"><h1>This is my Header</h1></div>
<div id="sidebarL">
<h3>This is my sidebar</h3>
<p>This is where our menu goes</p>
</div>
<div id="content">
<div id="sidebarR">
      <h3>This is my other sidebar</h3>
    <p>Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Qui officia deserunt consectetur adipisicing elit, ut enim ad minim veniam.</p>
</div>
    <h2>This is the content</h2>
<p>Velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ullamco laboris nisi sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua. Sunt in culpa in reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor quis nostrud exercitation lorem ipsum dolor sit amet. Ullamco laboris nisi consectetur adipisicing elit, qui officia deserunt. Ut labore et dolore magna aliqua. Quis nostrud exercitation. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Cupidatat non proident, excepteur sint occaecat velit esse cillum dolore.</p>
</div>
<div id="footer"><p>and lastly here is my footer</p></div>
</body>
</html>
Gramps

Want to display menu item horizontally in hover menu control?

hi,
I have to display 3 buttons as menu items in a hover menu horizontally. As the hover menu control only show the menu items in vertical form, but for a specific task, i have to place 3 buttons side by side in hover menu. if anyone have tried this please help me.
Thanks in advance
Deepak

Hi,
I have a suggestion:
Design your page into tables and rows.
Divide each row into columns.Example:
<table>
<tr>
<td>
<hbj:hoverMenu
id="hover1"
standAlone="true">
<hbj:hoverMenuItem
    id="1"
    text="Size"
    />
</hbj:hoverMenu>
</td>
<td>
<hbj:hoverMenu
id="hover2"
standAlone="true">
<hbj:hoverMenuItem
    id="1"
    text="Size"
    />
</hbj:hoverMenu>
</td>
</tr>
</table>
If you want to align the sub menu accordingly,you can again divide each row of the table into a subtable with rows and columns.
Hope this helps.
Regards,
Harish
(Please award points if this answer is usefull)

Help with vertical Spry menu

I posted this in the general forum, but thought I'd repost
here since this is more specific to Spry.
I'm having issues in IE (6 & 7...surprise, surprise) with
my vertical spry menu. It displays exactly the way I want it when I
use Opera. I think it has to do with the whitespace:nowrap on the
2nd level menu items, but I really don't know. I want the 2nd level
menu to be different width than the 3rd level, so I have both
levels set to auto width with nowrap.
This is how it looks in IE 7:
Menu
in IE
This is how it looks in Opera (correct):
Menu
in Opera
Attached is my CSS as well. Let me know if you need the HTML,
too.
Thank you for helping!
quote:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: auto;
left: -1000em;
top: 0;
white-space: nowrap;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: auto;
white-space: nowrap;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Changing arrow color on vertical spry menu

How do I change the color of the arrow on the vertical spry menu indicating there are submenus for that topic?

http://www.ipdctest.com/SpryAssets/SpryMenuBarVertical.css
It's the background image in these two CSS rules
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
PS the path to your SpryAssets folder is wrong in the page code.
Page code:
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
Should be
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

Vertical Accordion Menu

Hi there.
I'm browsing a lot of sites and scripts for Vertical Accordion Menus; something like this: http://www.i-marco.nl/weblog/jquery-accordion-menu/#
BUT, I need to know from you: What is consider as general practice about what triggers the dfferent menus & sub-menus.
I want a menu that falls out on mouse-over and "rolls back" on mouse-out; no clicking and I don't want any menu to be "open" when the mouse does not hover above it.
Now, what is regarded a common practise: click or mouse-over?
Is it OK not to have a sub-menu opened. See attached link. The whole menu can not be retrackted and want to open some menu.
Thanx for your help.
If anyone can point to a nice vertical accordion menu, I will really appreciate it.
Regards,
Deon

Hi Deon,
Have you checked Project VII and there Accordian Extension? http://www.projectseven.com
Its quite well done and eaily customizable i f you know some basic CSS.
Brad
Edit: Oh, on click is the general practice for that.

How to get rid of the line encasing the left hand side of a vertical spry menu?

Hi,
I have created a vertical spry menu bar. It all works but there is a line like this [ encasing the left hand side of the menu. Does anyone know how to get rid of this?
Thanks!

Line 73 in your Spry css calls for a border
ul.MenuBarVertical{
border: 1px solid #ccc;
Either remove the rule or change the #ccc to #fff

Error while creating iViews after implementing custom hover menu in NW 7.3

Dear Experts,
We recently implemented a customized hover menu in Portal 7.3. Since then while creating an iView we are getting the following error :
java.net.MalformedURLException: Illegal character in query at index 1023: /irj/servlet/prt/portal/prtroot/com.sap.portal.pagebuilder.IviewModeProxy?iview_id=pcd%3Aportal_content%2Fcom.sap.pct%2Fadmin.templates%2Fiviews%2Fcom.sap.portal.adminStudioRedirector&iview_mode=default&isEmbedded=false&workUnitIndex=0&oClass=com.sapportals.portal.iview&PagePath=pcd:portal_content/administrator/super_admin/super_admin_role/com.sap.portal.content_administration/com.sap.portal.content_admin_ws/com.sap.portal.wd_portal_content&SerWinIdString=&tabID=Tab054b1825_40f6_11e1_8169_00000ace34a2&workUnit=pcd%3Aportal_content%2Fcom.sap.pct%2Fadmin.templates%2Fiviews%2Feditors%2Fcom.sap.portal.appintegratorWizard&com.sap.portal.reserved.cnfgurl=pcd%3Aportal_content%2Fadministrator%2Fsuper_admin%2Fsuper_admin_role%2Fcom.sap.portal.content_administration%2Fcom.sap.portal.content_admin_ws%2Fcom.sap.portal.wd_portal_content%2Fcom.sap.portal.admin.studio.configuration&ComponentType=com.sapportals.portal.iview&NavigationTarget=navurl://e9d5d97dd3e55c9763a4973a016a3cc6&where=pcd%3Aportal_content&TarTitle=Portal Content Management&NavMode=0&sessionID=1326796101929&PrevNavTarget=navurl://032ac1f471768f5a16cac8e152546fd3&objectID=pcd%3Aportal_content&HistoryMode=1&com.sap.portal.reserved.wd.pb.restart=false&what=portal_content/templates/iviews/sap_bi7x_report_iview&workUnitUniqueId=054b1824-40f6-11e1-81f7-00000ace34a2&editorID=Tab054b1825_40f6_11e1_8169_00000ace34a2&displayName=New+iView&ClientWindowID=WID1326795999656
The error persists for all iView templates. Please provide your inputs.
Best Regards
Gaurang Dayal

Hi Gaurang Dayal,
The problematic part is the (first) space character within the parameter
TarTitle=Portal Content Management
You'd have to examine why this is not escaped.
Hope it helps
Detlev

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Vertical Spry Menu-IE alters positioning. How do I fix this? Works in all other browsers correctly.

I've recently uploaded a new website and am having a glitch with internet explorer with the vertical spry menu. It appears perfectly in all other browsers. I had added css rules to move up some of the longer submenus so they would all appear on the screen without needing to scroll down on the main page to view them. In internet explorer, it positions the top menu item, but the rest of the list does not follow in suit. Any ideas? This is super frustrating! Thanks!
link is here:
http://www.academypublishing.com

Hi,
I see now and it's really a little crazy, because the menus are there, just not where they should be.
I still need to investigate the matter thoroughly a little more closely, because I never saw it till now. Too bad that Gramps has not seen the thread, I'm convinced he will do the trick immediately! What if you would write a letter to him?By the way, did you make a try it with the original version of "SpryMenuBarVertical.css".
Hans-G.

Vertical Hover Menu on TLN !!

Similar Messages

Maybe you are looking for