Background Video Menu with Buttons on Top

Hi there.
I am trying to create a menu that has a looping video background with the buttons on top of the video.
I have created a short, 1min video in PPro, and imported it into the background of the menu by first creating a blank menu, then alt/dragging it into the blank menu.
When I place a button on top of the video, the video no longer plays.
Can I do it so that the video plays in the background and the buttons on top are active?
Thanks,
David

Hi Bill.
Here's the screen cap.I've included a screen cap of only the layers at the bottom, in case it's too small to read.
I'm not sure what you mean by muxed. It gives you the option to pick-whip to both audio and video, or alt/drag both audio and video onto a blank menu background. Do mean using a different file format than .m2v?

Similar Messages

Video menu with buttons

I am creating a menu using after effects. I have all my buttons in place when i want them to appear, but i don't know how to bring it back into Encore. I've tried "create button" in after effects but once i bring it back into encore i can't figure out how to make it work as the button. And once i assign a video to a button my video menu doesn't play anymore. Does anyone know how to make this work?

You create the menu in Encore (or Photoshop); the end product of the AE project is a video background.
Review this encore help file.
Edit: I suspect that you did not turn off the visibility of the AE buttons.
Here is a tutorial (in CS3) that starts with an Encore menu and pulls it into AE for the animated background.
You can also do the buttons in AE - not something I've done. Here's the relevant help page.

Trying to properly code a menu with buttons that can go back and forth between external swf files

I have a project I've been working on that, when properly coded, has a "main menu" with 4 "doors" (buttons). When the corresponding buttons to these "doors" are clicked, it should go to and play an external .swf file. If that doesn't make sense, think of a DVD menu. You click play movie, it plays the movie. When the movie is over, there's two buttons on that swf file to either play the movie over or go back the main menu, which is an external .swf file (Remember, we go to the movie from the menu, which is a seperate file). So far, the buttons work. The menu works. However, from the movie, at the conclusion, when I click the button to go back to the main menu, it displays the movie clip and the buttons, but none of the buttons work. I'm starting to think it has to do with the fact the main menu was written in AS3 and the movie was made in AS2. If anyone can assist me in being to able to keep both files and still navigate between the two, being able to bring up the menu from the movie and be able to play the movie again, and so on and so on, that'd be GREAT. I'm somewhat of a noob to Flash, but I learn quickly and I'm open to any suggestions. Here's the code for main menu, which I guess acts as the parent file, and the movie. If I get this to work, I essentially would duplicate the same actions for the other 4 doors, once I complete the environments for them. Thanks
Main.Fla/Swf (written in AS3)
(This is the action on the first frame, that has all the buttons. For this question, I'm just trying to properly code for 'Door4', which is the "door" to the movie.)
import flash.display.Loader;
stop();
var myLoader1:Loader=new Loader ();
Door4.addEventListener(MouseEvent.CLICK, jayzSwf);
function jayzSwf(myevent1:MouseEvent):void
          var myURL1:URLRequest = new URLRequest("jayzspeaks.swf");
          myLoader1.load(myURL1);
          addChild(myLoader1);
          myLoader1.x = 0;
          myLoader1.y = 0;
Movie.Fla/Swf (written in AS2)
(This is action on the button that returns to the menu)
on (release) {
          this.createEmptyMovieClip("container",this.getNextHighestDepth());
          container.loadMovie("main.swf");

At least you're going in the correct (mis)direction. You have AS3 loading AS2. So that's not a huge hurdle.
I believe all you really need to do is send your Main.swf a signal that the content it loaded (e.g. jayzspeaks.swf) is done and you want to get rid of it.
The code I pointed you to asks you to (upon download and import then) instantiate it in both AS2 and AS3. They give a very simple easy to understand line of code.
// as2, load this in jayzspeaks.swf
var myBridge:SWFBridgeAS2 = new SWFBridgeAS2("connectionID", clientObj);
// as3, load this in main.swf
var myBridge:SWFBridgeAS3 = new SWFBridgeAS3("connectionID", clientObj);
Make sure the connectionID matches between them. Set it to whatever you want.
When you're done with your as2 loaded content you'd send a signal (over localconnection) back to the AS3 Main like they say:
myBridge.send("someFunctionToUnloadContent");
myBridge.close();
You'd need to make the as3 function "someFunctionToUnloadContent()" (example purposes only name) and it should unload the jayzspeaks.swf that was loaded in the loader.
Make sure you get that close in there so you don't drill up a bunch of localconnection objects just like the simple source code says.

Help!!! How to create simple menu with buttons.

I basically need help on how to create a menu with Up, Left, Next and Back buttons.
Then it must have a submenus like Telephone, Lights, Fans and Television.
and more sub sub menus of On and Off buttons.
Ive jut started to learn Labview and a newbie at it.
It could be really nice if someone could make an example.
Would appreciate it if it could work like Ipod interface.
Thanksssss! Pls help!

Duplicate post.

How can I make a menu with button's that fade-in?

I've built a motion menu in AE, and had added text layers/buttons that fade-in through layer>Encore>Create Button. Once I import this into Encore through dynamic link I cannot link the buttons to the motion menu. I've added a sample.
Basically all I want is the play feature, Scene selection ,and credits to be selectable after they finish fading in @ the :20 mark. I don't want the menu to loop either.
I've tried to make a static menu(from last frame in AE) play after this, but, there is a one second gap or so before that static menu plays which just looks tacky. I have tried this in preview, and rendered it to a dvd with the same result.
All the tutorials i've come across really don't answer this question either.
Any help would be appreciated.
Thanks

I believe that Jon Geddes has a TUTORIAL, that might also be useful to you.
Sounds like you and Stanley have it worked out, but you might pick up an additional idea, or two.
Good luck,
Hunt

Scrollable/scalable image with buttons on top of it?

Hey guys,
I've had a few half-goes at doing this before but now have to do it for real in my project and I'm struggling to get something clean and I'm looking for pointers.
I want to have an image (typically a schematic, or a map) which is scrollable and zoomable. I want to overlay some buttons on the image for controlling zoom (and other things, but lets keep it simple for now). I want the whole thing to be a custom component that I can drop into another panel, and for that custom component to be resized nicely inline with its parent (i.e. if I put it in a BorderPane.center it should take up the available space and no more or less).
So I started with something logical/simple, a StackPane at the top-level with a ScrollPane containing an ImageView as the first child, and then an 'overlay' panel as the top child of the StackPane to conatain my buttons. I want to anchor my buttons to the top right of the image so I use an Anchor Pane for this. Something like:
public class MapView extends StackPane
    public MapView()
        ImageView imageView = new ImageView(new Image("C:/temp/my-image.jpg"));
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setPannable(true);
        scrollPane.setContent(imageView);
        getChildren().add(scrollPane);
        HBox zoomButtons = new HBox(5);
        Button zoomInButton = new Button("+");
        zoomButtons.getChildren().add(zoomInButton);
        Button zoomOutButton = new Button("-");
        zoomButtons.getChildren().add(zoomOutButton);
        AnchorPane controls = new AnchorPane();
        AnchorPane.setRightAnchor(zoomButtons, 20.0);
        AnchorPane.setTopAnchor(zoomButtons, 5.0);
        controls.getChildren().add(zoomButtons);
        getChildren().add(controls);
}This gives me the perfect layout but with one massive problem: the AnchorPane is stretched to take up the whole area of the StackPane (which is what I want from a layout perspective) but that means it blocks the mouse input to the underlying image view so I can't scroll.
So I try adding a call to the handy setMouseTransparent method:
controls.setMouseTransparent(true);And now I can scroll my image around, but I have the inverse problem: the buttons are now mouse transparent as well so I can't click them.
Snookered.
So maybe a Group is an option? I try using one instead of the AnchorPane:
ImageView imageView = new ImageView(new Image("C:\\temp\\corso\\pandids\\pandid-2.jpg"));
ScrollPane scrollPane = new ScrollPane();
scrollPane.setPannable(true);
scrollPane.setContent(imageView);
getChildren().add(scrollPane);
HBox zoomButtons = new HBox(5);
Button zoomInButton = new Button("+");
zoomButtons.getChildren().add(zoomInButton);
Button zoomOutButton = new Button("-");
zoomButtons.getChildren().add(zoomOutButton);
Group group = new Group(zoomButtons);
getChildren().add(group);I get my buttons in the middle of the screen and I can both scroll my image and click my buttons. But I can't figure out a way to anchor the buttons up to the top right. Group seems to resize itself to the contents of its children (I imagine there's a reason for this, but it makes Group completely unusable for every scenario I've had for it), so I can't really adjust the size or position of the Group. Calling resize() seems to have no effect and there's no setMaxSize or setPrefSize. Calling setLayoutX doesn't do anything cause its all within a StackPane. The only horribly hack I can think of is to add a dummy component to the group which is the size of the container the group is in. Too painful and too fragile to be a real option.
Snookered again.
Maybe I need a Group at the top level instead of the StackPane, but then it all goes a bit nuts with the ImageView sizing and layout pretty much totally gone.
The only other hack I can come up with is to put my own mouse listener on the anchor pane and implement 'panning' manually, but then the scroll bars won't work so I'll probably have to turn these off.
It seems like this should be really easy, and the first, logical simple approach was so close it hurts. Am I missing something simple, or is it really this hard?

Hi Zonski,
what about this?
        Group group = new Group(zoomButtons);
        group.translateXProperty().bind(group.layoutXProperty().subtract(20));
        group.translateYProperty().bind(group.layoutYProperty().multiply(-1).add(20));
        getChildren().add(group);Works for me
Cheers
Michael

JSpinner with buttons at top and bottom

I need to have an eight digit number where each digit can be individually incremented and decremented. I think a good solution would be a customized row of JSpinners - one for each digit. But I think it would look better and be easier to use if the up/down buttons were located at the top and bottom of each digit rather than the default of being next to each digit.
I'm sure it can be done, but I'm still a novice, so can someone point me in the right direction? And any feel how hard this will be?

Actually, in the end I wrote my own component, based on an early jSpinner done by Shazron Abdullah (IntSpinControl) (thanks Shazron!) . Mine is a multi-digit control that mimics the L&F of a pushwheel switch. I don't think the default arrows look bad, though it's easy enough to change later. Although not quite finished, it was actually easier that I thought it would be (I'm a noobie) and I have learned a lot about Java in the process.
Thanks to all those higher up the Java ladder helping the rest of us climb up!

Can a button be placed and selected on a video menu?

I'd like to create a main menu from a short video loop and place one or two buttons at certain locations. Can this be done? The video would stop and then connect to the button's track, right? Would I be able to have sound attached to the button's click? Should I make a duplicate video menu with the (linked-to) sound?

You can set up a motion menu and set a loop point (or you can add buttons to movie tracks) and the buttons can be placed on the menu. When the video reaches the end of the motion it will jump back to the loop point.
Usually a button being pressed will pause a motion menu (sometimes more obivious than others based on the player) and then jumps to the track. You can find a workaround to fake a button click sound via transitions (but most do not use that in DVDs) but if you are thinking something akin to mouseDown events in Director or Flash, that is not available as a command

Large background video/image

Hey all,
I am currently designing a website and one of the main features I would like is a large background video/image with header and large centred text laid over the top. The link I have provided shows exactly what I want to achieve but I don't know where to start.
The link below is the example:
http://weareadaptable.com/
Thanks for the help.
Alex

You have a link with an example. Do you know how to view source code? Start there!

For some reason, even though I have advanced features checked, the menu with green screen and all those isn't popping up when I drag the video on top of another one.

For some reason, even though I have advanced features checked, the menu with green screen and all those isn't popping up when I drag the video on top of another one. Help?

Hi
I would trash - iMovie pref file - and re-try - sounds like this got faulty.
• Delete iMovie pref. file. iMovie pref. file resides.
Mac Hard Disk (start-up HD) / Users / "Your account" / Library / Preferences
and is named. (one or more of these)
com.apple.iMovie.plist
com.apple.iMovie3.plist
com.apple.iMovie7.plist
com.apple.iMovie8.plist
com.apple.iMovie9.plist
com.apple.iMovieApp.plist
and find
com.apple.iApps.plist
While iMovie is NOT RUNNING - move this/these file/s out on to desk-top.
Now restart iMovie.
If You run Mac OS X.7 or more - then the Library in the User-account folder is invisibly and need to be set to be viewable. IT IS NOT in the Library on Root level (when opening MacintoshHD - first window = root level)
( It can be done like this: Open Terminal, then enter:
chflags nohidden ~/Library (exactly like this - space included)
Press return, then restart, and it will always be visible until the next major update, when you do the same thing again. )
Yours Bengt W

How can I fade in menus with background video?

Hi there,
I'm new to this forum (and to DVD SP) and have searched without being able to find out how to get my menus to work in this scenario:
I have a short (6s) background video that does not loop and ends on a still frame.
There are two drop zones, both with semi-transparent areas so that I can see the video play underneath. One drop zone has my title (as text in DVD SP) and the other has my "play" button.
I want my video to play for 5s and then have all the other elements fade in over the last second.
Here's what I've tried (thanks to suggestions from here and dvdstudiopro.digitalmedianet.com--which uses js that really bogs down Firefox, BTW):
A. I created a custom patch using PS that's a 6s .mov file that's simply a black mask that fades to white.-->this causes my drop zones (which are layered psd files with a mask of their own) to fade up, BUT the custom patch overrides the drop zone mask and causes the drop zone to become completely opaque.
B. I tried separating the background video and menus into separate menus in DVD SP. The first menu plays the video, then jump to the second menu which contains the last frame of the video as a still with the drop zones and button on top.-->this works but there is a noticable delay going from menu 1 to menu 2 and it looks horrible.
C. I created a 6s .mov file in FCP that does exactly what I want, but when I bring it into DVD SP, the quality suffers.-->I exported without compression from FCP and with, same bad results (especially in text).
Is there a way for me to get this to work gracefully?
I put a still of my menu with callouts at this url if it helps:
http://infactfilms.com/dvdmenu/
Thanks very much and I appreciate the wealth of info in this forum.
Cheers!
misho

Hi
Read this note about Menu rendering in DVDSP:
If you edit all your elements in FCP, adding the graphic fade in/outs, texts, etc and then export it directly with Compressor to MPEG2, and use that file/s as Menu backgrounds, DVDSP will not re-encode these menus.
If you add in DVDSP text, graphic for buttons, drop zones, etc it will need to render and encode the background again to add those graphics.
Take care of what video format you choose in FCP for your background edit. DV codec works really bad with graphic elements; you better choose DVCPRO50 sequence settings and export directly from FCP through Compressor. That way FCP will use the raw info from each frame and not the render files as if you export as Quicktime Movie.
Hope that helps !
Alberto

Problem placing buttons on top of a background image

My knowledge of Java isn't the greatest and I am currently having problems placing buttons on top of a background image within a JApplet (this is also my first encounter with Applets).
I'm using a Card Layout in order to display a series of different screens upon request.
The first card is used as a Splash Screen which is displayed for 5 seconds before changing to the Main Menu card.
When the Main Menu card is called the background image is not shown but the button is.
While the Applet is running no errors are shown in the console.
Full source code can be seen below;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.net.*;
// First extend JApplet
public class WOT extends JApplet {
     //--------------- Variables are declared here -----------------
     private CardLayout contentCardLayout = new CardLayout(); // declare CardLayout
     private Container contentContain;     // declare content Container
     private JPanel contentCard, splashScreen, mainMenu, menuImage; // declare content Panels
     private JLabel splash, menu, map; // declare image labels
     private ImageIcon mapBtn; // declare ImageIcons
     private JButton mapOption; // declare option Buttons
     private Timer timer; // declare Timer
     private ActionListener actionListener, mapOptionListener; // declare ActionListener
//--------------- Initialise Applet -----------------
public void init() {
     //--------------- Set-up Card Layout -----------------
     contentCard = new JPanel(contentCardLayout); // assign card panels to CardLayout
     //--------------- Splash Screen -----------------
     splashScreen = new JPanel();
     splash = new JLabel(new ImageIcon(getClass().getResource("img/bg.gif")));
     splashScreen.add(splash);
     splashScreen.setSize(600,800);
     splashScreen.setLocation(0,0);
//--------------- "View Map" Option Button -----------------
     mapBtn = new ImageIcon(getClass().getResource("img/map.gif"));
     mapOption = new JButton(mapBtn);
     mapOption.setBorder(null);
     mapOption.setContentAreaFilled(false);
     mapOption.setSize(150,66);
     mapOption.setLocation(150,450);
     mapOption.setOpaque(false);
     mapOption.setVisible(true);
//--------------- Main Menu Screen -----------------
     //menuImage = new JPanel(null);
     //menuImage.add(mainMenu);
     //menuImage.setLocation(0,0);
     mainMenu = new JPanel(null);
     menu = new JLabel(new ImageIcon(getClass().getResource("img/menu.gif")));
     menu.setLocation(0,0);
     mainMenu.add(menu);
     //mainMenu.setBackground(Color.WHITE);
     mainMenu.setLocation(0,0);
     mainMenu.setOpaque(false);
     //mainMenu.setSize(150,66);
     mainMenu.add(mapOption);
     //--------------- Map Image Screen -----------------
     map = new JLabel(new ImageIcon(getClass().getResource("img/map.gif")));
     //--------------- Add Cards to CardLayout Panel -----------------
    contentCard.add(splashScreen, "Splash Screen");
     contentCard.add(mainMenu, "Main Menu");
     contentCard.add(map, "Map Image");
//--------------- Set-up container -----------------
      contentContain = getContentPane(); // set container as content pane
      contentContain.setBackground(Color.WHITE); // set container background colour
       contentContain.setLocation(0,0);
       contentContain.setSize(600,800);
      contentContain.setLayout(new FlowLayout()); // set container layout
       contentContain.add(contentCard); // cards added
       //--------------- Timer Action Listener -----------------
       actionListener = new ActionListener()
                public void actionPerformed(ActionEvent actionEvent)
                         //--------------- Show Main Menu Card -----------------
                         contentCardLayout.show(contentCard, "Main Menu");
     //--------------- Map Option Button Action Listener -----------------
       mapOptionListener = new ActionListener()
                public void actionPerformed(ActionEvent actionEvent)
                         //--------------- Show Main Menu Card -----------------
                         contentCardLayout.show(contentCard, "Map Image");
     //--------------- Timer -----------------
     timer = new Timer(5000, actionListener);
     timer.start();
     timer.setRepeats(false);
}Any help would be much appreciated!
Edited by: bex1984 on May 18, 2008 6:31 AM

1) When posting here, please use fewer comments. The comments that you have don't help folks who know Java read and understand your program and in fact hinder this ability, which makes it less likely that someone will in fact read your code and help you -- something you definitely don't want to have happen! Instead, strive to make your variable and method names as logical and self-commenting as possible, and use comments judiciously and a bit more sparingly.
2) Try to use more methods and even classes to "divide and conquer".
3) To create a panel with a background image that can hold buttons and such, you should create an object that overrides JPanel and has a paintComponent override method within it that draws your image using the graphics object's drawImage(...) method
For instance:
an image jpanel:
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.net.URISyntaxException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JPanel;
public class BackgroundImage
    // **** this will have to be changed for your program:
    private static final String IMAGE_PATH = "../../m02/a/images/Forest.jpg";
    private BufferedImage myImage = null;
    private JPanel imagePanel = new JPanel()
        @Override
        protected void paintComponent(Graphics g)
        {   // *** here is where I draw my image
            super.paintComponent(g); // **** don't forget this!
            if (myImage != null)
                g.drawImage(myImage, 0, 0, this);
    public BackgroundImage()
        imagePanel.setPreferredSize(new Dimension(600, 450));
        imagePanel.add(new JButton("Foobars Rule!"));
        try
            myImage = createImage(IMAGE_PATH);
        catch (IOException e)
            e.printStackTrace();
        catch (URISyntaxException e)
            e.printStackTrace();
    private BufferedImage createImage(String path) throws IOException,
            URISyntaxException
        URL imageURL = getClass().getResource(path);
        if (imageURL != null)
            return ImageIO.read(new File(imageURL.toURI()));
        else
            return null;
    public JPanel getImagePanel()
        return imagePanel;
}and an applet that uses it:
import java.lang.reflect.InvocationTargetException;
import javax.swing.JApplet;
import javax.swing.SwingUtilities;
public class BackgrndImageApplet extends JApplet
    @Override
    public void init()
        try
            SwingUtilities.invokeAndWait(new Runnable()
                @Override
                public void run()
                    getContentPane().add(new BackgroundImage().getImagePanel());
        catch (InterruptedException e)
            e.printStackTrace();
        catch (InvocationTargetException e)
            e.printStackTrace();
}

Freeze between the end of a timeline and a menu with video.

Hi,
I have a timeline with some content advisor in the beginning of my encore cs3 project, then redirects to another timeline with a segment of a video, after that it redirects to the menu with another video (that video is the continuation of the previous one, and it is where the fusion occurs.)
The problem is that after redirect to the menu, it freezes for 2 secs. Is there any way to avoid that freeze? Or at least smooth it?

Bruno Gargaglione wrote:
Thanks for answering me.
However I still have some questions regarding this proccess:
1) Why AVI or MOV instead of M2V? If I export avi or mov from PP I will get my footage transcoded in encore.
2) Why can't I use in PP the PSD Menu I am using in my project in encore (without having to export from Encore)?
and the most important:
3) When I turn off visibility for all menu layers, how come they show up after it? After the loop point?
I understood almost the entire proccess and the reason you have to turn off the visibility for all menu layers but not how they show up after the loop point.
How?
1. You could export an M2V file from Premiere if you like, but then you'll need to make doubly sure that you have no visible menu layers in Encore, or Encore will render the motion menu and re-transcode your m2v to m2v again. If you used an AVI instead, Encore will transcode it to M2V. Either way, it will end up as M2V on the DVD. The key thing is to avoid re-transcoding.
2. I don't really understand your question. Do you want to somehow use the same PSD file Encore is using as your menu? If so, you'll have to dig in the Sources folder for that. It's really much simpler to export the PSD from Encore and use that. There is no quality loss in doing this, and far less chance of messing up your Encore file structure than if you go digging around in the Sources folder for the original that Encore uses. Just export the menu as a PSD from Encore and use that in Premiere...trust me, I'm a doctor.
3. You do this so that Encore doesn't render your menu Photoshop layers over the first video clip you are using as your menu video background.
* Regarding your last "How?" question...there are no menu layers on a menu when it's written to DVD - a menu is written to disc as an MPEG-2 still file (or in a motion menu case such as yours, an MPEG-2 video file) with a button highlight overlay to show your button selection status.
Message was edited by: jbowden

Background video in animated menu.

Have searched around the forums but can't find a definite answer to this.
I created an animated menu in After Effects with a background motion loop video.
Total length of 30 secs with button highlight appearing after 13 secs.
If I set the loop point in Encore for approx 14 secs the animated menu and button highlightetc all works ok
but the motion video in the background also stops at this point.
I assume this is probably correct but if not can anyone tell me what I might be doing wrong?
Alternatively, if it is correct, are there any tricks which would allow the background video loop to continue for the full 30secs?
Hope I have explained this clearly enough.
Thanks .

Did you use any of these? If not, take a peek to see if you did it right. (I'm wondering if your still menu is covering the motion in AE.)
Here's encore help:
http://help.adobe.com/en_US/encore/cs/using/WSA5513911-0AD1-440c-BDAD-2E0E806B425E.html
Here's an adobe tutorial on using AE for EN menus:
http://www.adobe.com/designcenter/video_workshop/?id=vid0258
From the After Effects help:
http://help.adobe.com/en_US/aftereffects/cs/using/WS3878526689cb91655866c1103906c6dea-7e45 a.html

How do I get my menu bar at the top of the page with no gaps?

How do I get my menu bar at the top of the page with no gaps? Whenever I move it there is a huge gap at the top of the page which I cant seem to get rid of, i posted about this before but none of the suggestions seemed to work for me. i'm not very good with css so im not really sure where to find the problem. There are generally gaps everywhere which looks at absolute mess, no clue how they got there and why, there is a huge gap underneath my menu bar too which wasnt there before. how do i get rid of this too? its probably some padding a or margin but no clue where.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"> <a href="home.html"><img src="_Business_Cards/banner copy.jpg" alt="banner" width="1064" height="374" align="top" /></a>

<ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="home.html">Home</a></li>
   <li><a href="#" class="MenuBarItemSubmenu">Lingerie</a>
     <ul>
       <li><a href="#">Camis & Nightslips</a>        </li>
       <li><a href="#" class="MenuBarItemSubmenu">Garter Belts & Girdles</a>
         <ul>
           <li><a href="#">Tops</a></li>
           <li><a href="#">Bottoms</a></li>
           <li><a href="#">Accessories</a></li>
         </ul>
       </li>
       <li><a href="#">Sets</a></li>
       <li><a href="#">Knickers</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Swimwear</a>
     <ul>
       <li><a href="t-shirt shop.html">Bikini</a></li>
       <li><a href="t-shirt shop.html">Tankini</a></li>
       <li><a href="t-shirt shop.html">One-Piece</a></li>
       <li><a href="#">Monokini</a></li>
     </ul>
   </li>
   <li><a href="#" class="MenuBarItemSubmenu">Men's</a>
     <ul>
       <li><a href="#">Boxer's</a></li>
     </ul>
   </li>
   <li><a href="#" class="MenuBarItemSubmenu">Extras</a>
     <ul>
       <li><a href="#">Bags</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Dancewear</a>
         <ul>
           <li><a href="#">Leotards</a></li>
           <li><a href="#">Crop Tops</a></li>
           <li><a href="#">Hotpants</a></li>
         </ul>
       </li>
     </ul>
   </li>
   <li><a href="clearance.html">Clearance</a></li>
<li><a href="pastpro.html">Gallery</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
<h2> </h2>
<div id="thumbs" width="192">
<p align="center">
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1064px; height: 561px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-87-105-108-108-105-97-109 -47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-10 1-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1, autoplayDelay:3000, autoplayStopOnInteraction:false}" data-erName="HomepageSlideshow" data-erTID="{zp7zmhgwl9549847691831}">
          <div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
          <li>
                    <img class="main" src="slideshowpictures/966629_346958598773375_2105784298_o.jpg" alt="One-Off Triangular Soft Bra & High-Waist Knicker Set" />
                    <img class="thumb" src="slideshowpictures/966629_346958598773375_2105784298_o.jpg" />
                    <span class="title">One-Off Triangular Soft Bra & High-Waist Knicker Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/thong ebay.jpg" alt="Pink + Aqua Thongs (Part of Nightslip and Thong set)" />
                    <img class="thumb" src="slideshowpictures/thong ebay.jpg" />
                    <span class="title">Pink + Aqua Thongs (Part of Nightslip and Thong set)</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_7405z.jpg" alt="Floral High-Waist Lace Panel Knicker" />
                    <img class="thumb" src="slideshowpictures/DSC_7405z.jpg" />
                    <span class="title">Floral High-Waist Lace Panel Knicker</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_0018 copy.jpg" alt="Navy Blue Velvet High-Waist Bikini Set" />
                    <img class="thumb" src="slideshowpictures/DSC_0018 copy.jpg" />
                    <span class="title">Navy Blue Velvet High-Waist Bikini Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_7420.jpg" alt="Pink & Aqua Nightslips (Part of Nightslip & Thong set)" />
                    <img class="thumb" src="slideshowpictures/DSC_7420.jpg" />
                    <span class="title">Pink & Aqua Nightslips (Part of Nightslip & Thong set)</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1208838_345346948934540_826580146_n.jpg" alt="Black Floral Bandeau & Lace Girdle Set" />
                    <img class="thumb" src="slideshowpictures/1208838_345346948934540_826580146_n.jpg" />
                    <span class="title">Black Floral Bandeau & Lace Girdle Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1176249_10201020390646766_1642170049_n.jpg" alt="Aqua Polka-Dot High-Waist Bikini" />
                    <img class="thumb" src="slideshowpictures/1176249_10201020390646766_1642170049_n.jpg" />
                    <span class="title">Aqua Polka-Dot High-Waist Bikini</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1012714_10151762577141348_907183642_n.jpg" alt="Maroon Velvet Bikini High-Waist Bottoms" />
                    <img class="thumb" src="slideshowpictures/1012714_10151762577141348_907183642_n.jpg" />
                    <span class="title">Maroon Velvet Bikini High-Waist Bottoms</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/floral ebay.jpg" alt="Floral/Multi Bikini High-Waist Bottoms" />
                    <img class="thumb" src="slideshowpictures/floral ebay.jpg" />
                    <span class="title">Floral/Multi Bikini High-Waist Bottoms</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_0096 copy9.jpg" alt="Purple & Champagne Bandeau Bikini Tops" />
                    <img class="thumb" src="slideshowpictures/DSC_0096 copy9.jpg" />
                    <span class="title">Purple & Champagne Bandeau Bikini Tops</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1005246_10151762745636348_129531182_n.jpg" alt="Aqua Polka-Dot High-Waist Bikini" />
                    <img class="thumb" src="slideshowpictures/1005246_10151762745636348_129531182_n.jpg" />
                    <span class="title">Aqua Polka-Dot High-Waist Bikini</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_73612.jpg" alt="Matching Orange/White Lace Crop Top & Thong Set" />
                    <img class="thumb" src="slideshowpictures/DSC_73612.jpg" />
                    <span class="title">Matching Orange/White Lace Crop Top & Thong Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/logo h copy.jpg" alt="Logo" />
                    <img class="thumb" src="slideshowpictures/logo h copy.jpg" />
                    <span class="title">Logo</span>
          </li>
</ul>
</div>
          <div data-ertype="layout" data-ertemplateName="NONE" style="">                    <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
                              <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
                                        <div class="erimgMain_slide">
                                                  <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
                                        </div>
                              </div>
                              <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
                              <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
                    </div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
                              This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
                              <br /><br />
            Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
                              <br /><br />
                              <a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
                    </div>
                    <noscript>
                              Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
                    </noscript>
                    <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
          </div>
</div>
</p>
</div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<img src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg" alt="PayPal Acceptance Mark" width="192" height="38" border="0" align="right" />
<div align="left">
<p><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside', 'olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=500');">Copyright © Hannah-Rose 2013 > <a href="about.html">About</a> > <a href="terms and conditions.html">Terms & Conditions </a></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: 64em;
          margin-bottom: 0px;
          margin-left: auto;
          margin-top: 0px;
          margin-right: 0px;
/* 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 a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 8em;
          float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin-top: -5%;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #FFF;
          color: #333;
          text-decoration: none;
          font-family: Pristina;
          font-size: 21px;
          font-weight: normal;
          padding-right: 0.75em;
          padding-left: 0.75em;
          padding-top: 0.5em;
          padding-bottom: 0.5em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal 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.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #FFF;
          color: #666;
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.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* 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.MenuBarHorizontal ul 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul 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.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* 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.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

Background Video Menu with Buttons on Top

Similar Messages

Maybe you are looking for