BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Templates
  New Posts New Posts RSS Feed - Drop-down menu [SOLVED]
  FAQ FAQ  Forum Search   Register Register  Login Login

Drop-down menu [SOLVED]

 Post Reply Post Reply Page  12>
Author
Message
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Topic: Drop-down menu [SOLVED]
    Posted: Dec 29 2014 at 5:06pm
Hellò. I'm again here 'cause I'm trying other tips to develop that site. At first I have seen there are too many links in the bar, so I decided to cut some of them and prepare a drop-down menu wit submenu, but I found difficult including it in the header-Group of Elements. I tried, but without succes, so I'm asking how can be possible.

I wrote the CSS code into the Code Block Source and the Html into the Code Block Visual,. Code Block Source answers "Don't use IDs in selectors"... (what does it means?)

Here is the code

CSS

body{
    font-size:100%;
    color:#333;
    font-family:sans-serif;
}

/*container*/
#drop-menu {
    margin: 0 auto;
    padding: 0;
    width: 960px;
}

/*menu*/

ul#menu {
    margin:60px 0 0;
    padding: 0;
    list-style: none;
    float:left;
    width: 960px;
    background-color: #111;
    font-size:80%
}

ul#menu li {
    margin:0;
    padding:0;
    float:left;
    display: block;
    border-right: 1px solid #222;
    position: relative;
}

ul#menu li a {
    float: left;
    padding:12px 30px;
    color: #fff;
    text-transform: uppercase;
    text-decoration:none;
}

ul#menu li a:hover {
    background: #666;
    color:#fff
}

ul#menu ul {
    margin:2px 0 0;
    padding:0;
    display:inline-block;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index:9999;
    background: #444;
}

ul#menu li:hover ul {
    opacity: 1;
    visibility: visible;
}

ul#menu ul li {
    float: none;
    display: block;
    border: 0;
}

ul#menu ul a {
    padding:10px;
    width: 130px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

ul#menu ul a:hover {
    background-color: #0186ba;
    color:#fff
}


HTML

<div id="drop-menu">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Categories</a>
                    <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Graphic design</a></li>
                        <li><a href="#">Development tools</a></li>
                        <li><a href="#">Web design</a></li>
                    </ul>
                </li>
                <li><a href="#">Work</a>
                    <ul>
                        <li><a href="#">Work 1</a></li>
                        <li><a href="#">Work 2</a></li>
                        <li><a href="#">Work 3</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

I tried using the same approach as in other links I made before, but is not working... nothing appears...


Edited by Bravo12 - Jan 06 2015 at 3:19pm
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Dec 29 2014 at 9:17pm
Normally you don't need to put "ul" into "ul#id" as #id is already unique (you are not supposed to have identical IDs throughout you page's HTML), but it is not an error.

Could you please publish it online somewhere and give the link?
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 30 2014 at 2:14am
I always have that same problem: I haven't a place where to publish...
I'll try to delete those and I'll let you know, but I already don't think is a such bad error to hide the visual result......usually I use code in that way and I don'y have bad answers...

Other thing for you to check: I received the usual email saying "click here" to come to the forum, but the target is in french language and when clicked, it gaves the error page. This is the given link with the error

http://forum.openelement.com/fr/forum_posts.asp?TID=290&PID=1103#1103

Erreur de serveur

404 - Fichier ou répertoire introuvable.

Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Dec 30 2014 at 1:15pm
Yes, there's something wrong with redirections. I just manually  replace "/fr/"by "/en" in the browser's address bar
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 31 2014 at 2:10pm
I prepared another css menu but with dropdown list. It is working, but using the header as told before (static) I can't fix the problem about the css that goes down with other choices; I mean: clicking a link that will open the drop menu, the name of the link (submenu) will go downer, and I will never see it 'cause I am using a header (Group of elements) of 150 px; but if I change to 300px for the header entire, then I will see all links (only 1 submenu). The problem is that the menu doesn't open over the down page (main)... so I'm forced to give more pixels high to the header. In the header I've used the code you suggested for making it static...

I changed all code just for having a better result, but I see is the same tried before. It doesn't allow to open a dropdown menu with buttons-link opening also over the down (main) page. The bar-link (navbar) reside on the Group of elements (header), but when clicked I need they become visibles and clickables over the below page.

How can I make it appear also on the main page, to continue, and avoiding the 300px high for the header? The header has a color, so it can't take half page only 'cause of the navbar...I need it not more than 150-160px high......

I tried also to chose Selection: Code Block -->Foreground and Selection: Code Block -->Forward, but always the menu disappear under the main page, and I need it visible also on the main page

Can it be fixed? If yes, how? Embarrassed

Well, take your time 'cause I don't pretend to have quick answer just today that we are ending the year... Wink

In the meantime, I'll try to check if I can fix it by myself... but till now has been a problem Confused

So, if we will not hear again this afternoon...

my sincere Greetings hoping to you all a better
New Year
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Dec 31 2014 at 6:08pm
Without trying to understand in details your problem, I suggest you try to let the contents of the Group of elements be visible even when it goes beyond the panel. Look in the Properties and in Styles->Personnalisation for Overflow (you need Visible, not Auto or Hidden)
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Jan 01 2015 at 4:00pm
First of all and again: Happy New Year to everybody!

Thanks for answering me, Dmit.

I cleaned it from the IDs and tried again....
I already set as visible all parts you said, but there must be something wrong between the code I use and the one used in Oe. If I made a simple page written in Notepad with this code, it works, but after included into the already existent page made with Oe, it doesn't work as it should. In the Oe preview I see as it is needed, but when I close the project and launch the index page, it gaves me all text with bullets and without graphic...
[I always act in the BaseLayer, 'cause in end, all pages will come from there]
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Jan 02 2015 at 11:22am
You really need to find a hosting (there are some for free that may be enough for testing) and use it to show your pages so that errors can be analysed.

Meanwhile, you can again send your project, and indicate where to look exactly.
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Jan 02 2015 at 3:25pm
Hellò! So we are in the new year, but I don't see a change...
Anyway: as told is very difficult for me having an account for trying sites.

I can upload as before the latest I made, so you can see what happens, but I wouldn't disturb you so much...




Edited by Bravo12 - Jan 06 2015 at 2:12pm
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Jan 06 2015 at 3:17pm
EVERYTHING OK! I found the silly problem...
During writing the code into Oe script manager (Code Block - Source), the panel shows alert (yellow triangle) about the included # so, as probably many peoples would do, I deleted them and the code became clear... but the layer page still not working as needed...

By chance I found on this forum an old page, made by Dmit, (http://forum.openelement.com/en/forum_posts.asp?TID=46&title=fixed-navigation-bar) in 2013!
I've read the code and found he was again using the #. So I came back to that layer not working, added all # and voilà, now everything work!

Be careful when you delete code that the program is showing as bad... I came crazy for 3 days!!!

Thanks for the big help and the patience to Dmit! Beer

Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.