Seeking: Drop Down Menu Tutorial for DreamWeaver CC (Pure CSS)
Hey all.
I'm relatively new to Dreamweaver, and web design in general. I took on a project to create a small-business website for my buddy.
I'll start by saying that I've googled, and have found several copy / paste solutions, as well as several plugin-style solutions. For various reasons, I'm not interested in other methods of creating a menu (jQuery). Project 7, before you post (like you seem to do in EVERY thread I've read about this topic...), I may purchase your tool later, but I want to learn the process first.
I'd like to know if anyone knows of a video or a walkthrough of how to create a CSS-only drop down menu for DreamWeaver CC. An in-depth tutorial will help me better understand CSS and HTML in general, as well as help me navigate the changes in DreamWeaver (namely, the CSS designer).
Any ideas?
http://www.w3schools.com/css/css_navbar.asp
http://cssmenumaker.com/blog/tutorials
http://www.siteground.com/tutorials/menu/css.htm
http://ntt.cc/2010/11/24/30-pure-css-menu-tutorials-for-web-developers.html
Try one of these sites, should have what your are looking for.
Similar Messages
-
I'm trying to find a word processing app that is comparable with Microsoft Word, but can use drop down menu's to fill in forms? Any suggestions
Microsoft Word for Mac
OpenOffice
NeoOffice
LibreOffice -
Can't find the right drop down menu tutorial I'm looking forr
HI I'm trying to build a vertical drop down menu with five
buttons. the third button will have three options that are revealed
on rollover. The three options are revealed as the bottom two
buttons move down the stage and then move back again on roll out of
the third button. I hope this makes sense and that someone can
help. Any tutorials? Advise? Many ThanksIt's not under Security tab...Click on the Wireless tab and then Wireless Security subtab and you will see the drop down menu where you can select WEP/WPA...
-
Drop-down menu in Dreamweaver; template on top of template issue
Hello.
I've managed to create a drop-down menu in a dreamweaver
template by saving the .dwt file as an .html file, building the
menu, then resaving the file as the original .dwt. However, I have
another template that is based on this original template, and while
the drop-down menu appears when I preview the second template in my
browser, it refuses to apply to the pages upon which the second
template is based.
Is there a solution to this?You are completely hosed now.
When you save a template as HTML, you leave the Template
markup in the page.
When you then resave it as a template you duplicate that
markup. You will
never be able to use this properly now. And that is
especially true with
the AWFUL DW pop-up menus in it. You just must not use these
menus with
templates. Especially since there are much better ways that
don't have any
such restrictions -
Check the uberlink and McFly tutorials at PVII
http://www.projectseven.com/)
and the Navbar tutorial at Thierry's place (
http://www.tjkdesign.com)
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"xpanda" <[email protected]> wrote in
message
news:e9q2gf$oq4$[email protected]..
> Hello.
>
> I've managed to create a drop-down menu in a dreamweaver
template by
> saving
> the .dwt file as an .html file, building the menu, then
resaving the file
> as
> the original .dwt. However, I have another template that
is based on this
> original template, and while the drop-down menu appears
when I preview the
> second template in my browser, it refuses to apply to
the pages upon which
> the
> second template is based.
>
> Is there a solution to this?
> -
Buttons - making a drop down menu
Hello,
I only know very basic flash. Right now, I am attempting to revamp a website. The buttons that are currently being used are only gifs that are hyperlinked and there are almost 12 buttons... I think that this is a ridiculous amount of buttons to have. It looks very cluttered.
So, I figured I should make 6 buttons and just fit the rest of the buttons into subcategorized buttons. And the way to do this is to create flash buttons with drop down menus. To see what I mean, go to this link and look at their buttons:
http://ca.msn.com/
Their buttons drop down into menus with sub-categories. I want to do this.
So far, I have gone into flash, created buttons and made graphics for the "Up" "Over" "Down" and "Hit". I have also added the menu buttons and graphics for the "Over" of each drop-down button-menu.
I have even provided the action script to link each button to where I need it to go.
HOWEVER, here is where the problem is. When I roll the mouse over the button, and then move the mouse down to click on one of the buttons in the drop down menu, the menu disappears, OF COURSE, because the mouse goes off the hit. I can't make the hit bigger, because the menu shouldn't open unless it's on the main button. But without the hit being bigger, the menu will always disappear.
IN ADDITION, I've never used flash buttons on a website before. I'm just using HTML. How do I link the button to the page? Do I save the file as a .swf flash file? And link to 6 different files? Or do I save the buttons in a line, and just use one link?
I'm on a bit of a deadline so any help is appreciated. Thanks in advance!
-MichelleWhile I can't help you with your deadline, I can offer a little bit of input. To take a Flash approach you should find a Flash drop down menu tutorial thru Google and follow thru that to gain an understanding of how to construct one. The problem you are having with the rollover stems from needing to extend the rollover such that each element of the dropdown also carries that rollover command. Each button needs to be assigned code to process interacting with it and linking to some other web page. The swf file that you publish would need to be sized for holding the buttons and then must be placed on the web page.
The example you pointed to uses a CSS drop down menu, which you will likely find easier to create and manage if you have no familiarity with how to make Flash work in a web site. I suggest going to the Dreamweaver forum and looking there for information about that approach. -
Problems with mm_menu.js (drop-down menu)
I've made a couple of sites with mm_menu.js (drop-down menu) made by Dreamweaver. It works fine in Firefox, Google Chrome. It worked fine in Internet Explorer up to version 9. In version 10 the mm_menu.js doesn't show at all, and in version 11 it does
show up, but places itself in the upper left corner of the browser. Can anyone explain why this is so? Is there any fix one can put in the code to make the drop-down menu look correct?This is the TechNet Forum for Questions regarding Internet Explorer 8, 9, 10 and Internet Explorer 11 for the IT Pro Audience. Topics covered are: Installation, Deployment, Configuration, Security, Group Policy, Management questions.
For better assistance please ask for help in the MSDN IE Development Forums.
Thanks & Regards,
Vincenzo Di Russo
Microsoft® MVP Windows Internet Explorer, Windows & Security Expert - since 2003.
Moderator in the Microsoft Community and TechNet Forums
My MVP Profile -
How do I create a drop down menu with Code Snippets and Flash CS5?
Hi
I am wondering how to create a drop down menu using the Code Snippets and CS5?
There are some older tutorials out there and it would be nice if someone could create an updated drop down menu tutorial, and it might be me doing this after I have figured out the best and easiest way to create one, but before that I need some pointers.
Thanks!
Have a great day!
Paal JoachimYou can use panel widget to create manual menu where set to show target on rollover.
Something like this :
http://muse.adobe.com/exchange-library/menu-vertical-accordion-widget-1
http://muse.adobe.com/exchange-library/tiptop-navigation-menu
Thanks,
Sanjit -
How to display further information when a drop down menu option has been selected.
Hi all,
Thank you in advance for any replies!
I'm building a website which has a drop down menu (HTML for the menu is below). When a TV size is selected i need the pricing information for that specific TV size to appear below the menu.
Is there a way to do this?
Thank you!
<select name="Please select your TV Size" size="1">
<option> </option>
<option>Less than 42"</option>
<option>More Than 42"</option>
</select>Sure it is. And Nancy has given you a good alternative as well.
<p>TV1 <input id="num1" type="radio" checked value="tv1" onclick="document.getElementById('tv1').style.display='block';document.getElementById('tv 2').style.display='none';this.checked=true;document.getElementById('num2').checked=false;" ></p>
<p>TV2 <input id="num2" type="radio" value="tv2" onclick="document.getElementById('tv2').style.display='block';document.getElementById('tv 1').style.display='none';this.checked=true;document.getElementById('num1').checked=false;" ></p>
<div id="tv1">Info for TV1</div>
<div id="tv2">Info for TV2</div>
With this CSS -
<style type="text/css">
#tv1 { display:block; }
#tv2 { display:none; }
</style>
Should work. -
How to make animated drop down menu responsive?
Hi
I've made an animated drop down menu in Edge Animate. It works fine at 945px wide with drop downs coming from 4 of the links. When the window is resized to 700px I want to reduce the 8 top links down to 4 and have longer drop downs and the same again at 400px wide. How do I do this as Edge has no media queries. do I use symbols?
Thanks.Hi garyt88,
Found something that could help although I have to admit that I have not tried it myself.
Adobe Edge HTML5 Interactive Drop-Down Menu Tutorial - YouTube
Thanks,
Preran -
Dynamic Drop Down Menu from an Access Database
Hello Everyone,
I am user Adobe Designer 7 to create a fillable PDF, and I would like to get the options for a drop down menu from my MS Access database. Basically I would like to populate the drop down menu with the names in the Access database. There i Have a table called PhoneNumbers and it contains the names of all the people I want to appear in the drop down menu that I just created.
This is what I did:
I created a drop down menu and then I clicked on Object > Binding > under "Default Binding (Open, Save, Submit)" choose "New Data Connection"
then connect to the database using a fileDSN. I opened the table where with the "names" column (PhoneNumbers)
and under the "Query," option, I wrote:
select * from PhoneNumbers
Then it gave me all the fields from the table and I dragged the "Last name" field over the drop down menu. I will need to find a way to get the "First Name" field to join the Last Name field to create one name that looks like this: Hill, Angie
The problem is that even though it shows the name from the Access database, it does not give me a list of all the names when I open the form in Reader 7...
No matter how much I click that drop down arrow, the name does not change...
It's almost as if it gets to the databse and gets the data from the database, but it cannot loop through it...
It's almost as if it's missing the code to loop through it...
Why is this? Any ideas how to fix it so it gives me a list of ALL the names, when I click on the drop down button?
After that, how can I add the first name to it?
The form would look like this:
Angie H. 202 641 2055
Right now it does look like that, but I cannot change to another name when I click the drop down menu. For the code to be working when I change to another name, the phone number also changes to the phone number of that person:
Barry S. 703 555 1258
The name is in a drop down menu, the phone number is in a textbox.
Can you help me with this?ANGELA,<br /><br />Well, the good new is that you are not far off...What you need is to insert the following code using Java Script under the Initialize function. Just replace the Connection name, The Hidden Value, and the Display Text with your information. This is a function is 8.0 but will work with 7.0<br /><br />/* This dropdown list object will populate two columns with data from a data connection.<br /><br /> sDataConnectionName - name of the data connection to get the data from. Note the data connection will appear in the Data View.<br /> sColHiddenValue - this is the hidden value column of the dropdown. Specify the table column name used for populating.<br /> sColDisplayText - this is the display text column of the dropdown. Specify the table column name used for populating.<br /><br /> These variables must be assigned for this script to run correctly. Replace <value> with the correct value.<br />*/ <br /><br />var sDataConnectionName = "DataConnection"; // example - var sDataConnectionName = "MyDataConnection";<br />var sColHiddenValue = "CAT_Corp_SeqNo"; // example - var sColHiddenValue = "MyIndexValue";<br />var sColDisplayText = "CAT_Corporate"; // example - var sColDisplayText = "MyDescription"<br /><br />// Search for sourceSet node which matchs the DataConnection name<br />var nIndex = 0;<br />while(xfa.sourceSet.nodes.item(nIndex).name != sDataConnectionName)<br /> {<br /> nIndex++;<br /> }<br /><br />var oDB = xfa.sourceSet.nodes.item(nIndex);<br />oDB.open();<br />oDB.first();<br /><br />// Search node with the class name "command"<br />var nDBIndex = 0;<br />while(oDB.nodes.item(nDBIndex).className != "command")<br /> {<br /> nDBIndex++;<br /> }<br /><br />// Backup the original settings before assigning BOF and EOF to stay<br />var sBOFBackup = oDB.nodes.item(nDBIndex).query.recordSet.getAttribute("bofAction");<br />var sEOFBackup = oDB.nodes.item(nDBIndex).query.recordSet.getAttribute("eofAction");<br /><br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute("stayBOF", "bofAction");<br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute("stayEOF", "eofAction");<br /><br />// Clear the list<br />this.clearItems();<br /><br />// Search for the record node with the matching Data Connection name<br />nIndex = 0;<br />while(xfa.record.nodes.item(nIndex).name != sDataConnectionName)<br /> {<br /> nIndex++;<br /> }<br />var oRecord = xfa.record.nodes.item(nIndex);<br /><br />// Find the value node<br />var oValueNode = null;<br />var oTextNode = null;<br />for(var nColIndex = 0; nColIndex < oRecord.nodes.length; nColIndex++)<br /> {<br /> if(oRecord.nodes.item(nColIndex).name == sColHiddenValue)<br /> {<br /> oValueNode = oRecord.nodes.item(nColIndex);<br /> }<br /> else if(oRecord.nodes.item(nColIndex).name == sColDisplayText)<br /> {<br /> oTextNode = oRecord.nodes.item(nColIndex);<br /> }<br />}<br /><br />while(!oDB.isEOF())<br />{<br /> this.addItem(oTextNode.value, oValueNode.value);<br /> oDB.next();<br />}<br /><br />// Restore the original settings<br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute(sBOFBackup, "bofAction");<br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute(sEOFBackup, "eofAction");<br /><br />// Close connection<br />oDB.close();
-
Link directly out of a drop down menu
Hi,
I would like to link directly out of the drop down menu, but I don't get it running.
Here each entry in the drop down menu has a different link.
My drop down menu will be created in a dynamic way.
Here's my code:
XHTML:
<h:selectOneMenu value="#{statistics.choosedValue}">
<f:selectItems value="#{statistics.list}" />
</h:selectOneMenu>
BEAN:
private List<SelectItem> list;
public void dropDown()
list = new ArrayList<SelectItem>();
Integer num = new Integer(instance.getCurrentDatasetHolderInstance().countDatasets());
list.add(new SelectItem(num.toString()));
for (Dataset dataset : datasetList) {
list.add(new SelectItem(dataset.getName()));
+ Getter und Setter
Does anyone know how to link direclty ot of the drop down menu
Thx for your efforts,
Cheers WolfgangSee JList.getSelectedValues()
-
Drop down menu don't work!
Help me please!!!
What is wrong with that AS2 drop down menu (flash8)?
I want to make a button stay in its down state when it's clicked, and I did it for the MC buttons "Objectivity" and "Publications", but not for MC button "Fotography", that trigger the vertical drop down menu. I also want that the MC buttons "Objectivity and "Publications" make the "vertical drop down menu" reverse for it's original state (hide).
P.S. Of course, I want all the MC buttons link to their respective URL's.
Sorry for my english and annoying newbie questions!
Thank you very much!!!
Cagalhoto
Download file: http://rapidshare.com/files/415149494/menu_test.flait's not likely anyone will download and correct your files. most of us offer free help here but there's a difference between doing someone's work for them (and we do that too, but when we're hired) and helping someone do their own work.
-
Dependent Drop-Down Menu in Dreamweaver CS3 and ADDT
Hi All,
I have been trying to create a dependent drop--down menu so that when I select an item the corresponding information would populate the other field or fields. So far I have tried to use the tutorial posted on the link below by Waleed Barakat but I have had no sucess.
http://www.tutorials-expert.com/tutorial/20354/-How-To-Create-Dependent-Dropdown -ListMenu-Forms.html
I wanted to know if anyone has something else that I can review to help me in this process.
ThanksPlease refer to this article (http://forums.adobe.com/message/1069624#1069624) for information on how your tables should be set up.
Date: Wed, 10 Jun 2009 00:49:28 -0600
From: [email protected]
To: [email protected]
Subject: Re: Dependent Drop-Down Menu in Dreamweaver CS3 and ADDT
Hi Georgev63,
I followed the instructions to the link you sent me and it did not produce the results I had hope for.
The directions are pretty straight forward and I attempted the steps several times with the same results.
Basically the field that supposed to be the detail field is blank rather than having the ID of the master field.
Any further suggestions would be much appreciated.
Thanks
E.
> -
Drop Down menu for navigation bar
I created a site a couple years ago (with GoLive) with a
navigation bar with rollover states. I would like to create
something very similar to it now in Dreamweaver CS3 but with the
addition of a drop down menu for just a couple of the navigation
icons. I have been told by Adobe tech support on the phone that I
need some custom coding to do this.
To see what the navigation bar looks like now go to
www.aimeeastvillage.com
I DON"T need the drop down choices to be in a whimsical font.
I just don't want to have to direrct the reader to go to an
additional page. PLEASE tell me this is possible for a relative
beginner! Thanks.Check the uberlink and MacFly tutorials at PVII -
http://www.projectseven.com/
and the Navbar tutorial/articles at Thierry's place
http://tjkdesign.com/articles/dropdown/
Or this one (more recent article):
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Purple Mango" <[email protected]> wrote in
message
news:fpv17r$gsp$[email protected]..
>I created a site a couple years ago (with GoLive) with a
navigation bar
>with
> rollover states. I would like to create something very
similar to it now
> in
> Dreamweaver CS3 but with the addition of a drop down
menu for just a
> couple of
> the navigation icons. I have been told by Adobe tech
support on the phone
> that
> I need some custom coding to do this.
> To see what the navigation bar looks like now go to
> www.aimeeastvillage.com
> I DON"T need the drop down choices to be in a whimsical
font. I just don't
> want to have to direrct the reader to go to an
additional page. PLEASE
> tell me
> this is possible for a relative beginner! Thanks.
> -
Hello everyone,
Thank you in advance for dealing with my inexperience and answering my question.
I have been stuck on this for wayyyy too long. Here is my problem. I created a drop down menu for a portfolio website I am building. When I pull this into Dreamweaver the way to link the menu items to the pages is elusive. I have no idea what to do. Please help?
Here is the screenshot. Thank you very much Jennifer
OK, Well no one can actually see this image since it came in so small, but please help me anyway if you can?Thank you for answering my question. I created the graphics in photoshop, sliced them in fireworks and now I am pulling the site in dreamweaver to link it. The dropdown is just a little dropdown menu. I created it in Fireworks because when I tried to create one in Dreamweaver I had to use a spry which was even harder to figure out and get to work. If I knew Html or CSS my life would be much easier but I don't. I don't have much time to learn it right now since I work over time all week, do graphics freelance and I go to school for computer science. I need to get this site up and I just want a fast little fix to get it up. When I have time to learn more I can make this site better or start a better site, but for right now it just needs to work. Is there a way to get what I have working so I can just get this site up. Later I will have more time and more experience to do this better. I am learning so thank you for your experience.
Thanks,
Jennifer
Maybe you are looking for
-
Problem with shared column mapping
I have a problem with mapping different fields onto the same column. In most cases Kodo handles it very well but one tough case it does not Modification references contract N-1 using contract_id field Contract back references two modifications out of
-
In my Itunes page the add play list and all other buttons are missing
In my Itunes the add play list button and all others at the buttom of the page are not visiable hos anyone else run into this problem?
-
Hello Everyone, We are trying to protect one resource. We have installed Oracle Identity and Access Management Suite and also OID, OVD. What we want is to create external users through self registration in OIM and then provisioned them to OID. but wh
-
What do you do when you down load a $32 dollar audio book and part 2 goes missing during the processing stage and i cant find it anywhere?
-
Finder's version number "10.4.2" under OSX 10.4.3
I decided to hit "About Finder" and I got version 10.4.2 even though the OS version is currently 10.4.3. Is everybody else getting this? Is it normal for the developers to not do anything with Finder for some updates?