Help with my drop-down list in the fluid grid view

Print-screen-mobile-LO-070615.jpgPrint-screen-tablet-LO-070615.jpgPrint-screen-desktop--LO-070615.jpg

I built the site of "fluid" and that's great, up and running and I am delighted!  A big thank you to the DW forum. URL is: tyndall.net.au

Now, I want to add a drop-down in the three 3 sizes: mobile, Tablet and desktop. And I want it to develop the ' Services ' section. On the 'Services' page there are links to 21 different types of services.

It is these types of different services, have to be displayed in the drop-down list button.

Objective: in hover mode, the fall down to look identical to the head key, centered with a complete history! To inherit.

You can see on the screenshots:

In Mobile, there is a complete history, but it is not centered and not the same size

Tablet & Desktop - background not complete, not centered, not the same size

I can't find a tutorial on this issue. Tutorial of Daniel Walter - Scott in BYOL helped a long way, thanks mate.

Can someone help me with this problem?

Concerning

Jonathan

Byron Bay, Australia

__________________________________________________________________

Reach:

Here is the HTML code for the nav div:

< nav id = 'mainNav' class = "fluid" > < ul id = "menuSystem" class = "fluid fluidList" > "" ""

< li = class "menuItem fluid zeroMargin_tablet zeroMargin_desktop" > < a href = "/ index.html" > home < /a > < /li >

"< class li ="fluid menuItem"> < a href="/About/about.html "> on < /a > < /li >

"< class li ="fluid menuItem"> < a href="/Services/services.html "> Services < /a >

< ul >

< class li = "fluid menuItem" > < a href="/Services/otherpage.html" > Immigration < /a > < /li > ".

< class li = "fluid menuItem" > < a href="/Services/otherpage2.html" > Banking < /a > < /li > ".

< class li = "fluid menuItem" > < a href="/Services/otherpage3.html" > bankruptcy < /a > < /li > ".

< /ul >

< /li >

< class li = "fluid menuItem" > < a href="/Articles/publication.html" > items < /a > < /li > ".

< class li = "fluid menuItem" > < a href="/Migrate/migrate.html" > migrate < /a > < /li > ".

"< class li ="fluid menuItem"> < a href="/Journal/journal.html "> Blog < /a > < /li >

< class li = "fluid menuItem" > < a href="/Contact/contact.html" > Contact < /a > < /li > < /ul > < / nav >.

< / header >

Here are all the css in style.css code:

@charset "utf-8";
/ * Simple fluids
Note: Fluid requires that you remove the attributes height and width of the media of the HTML
http://www.alistapart.com/articles/fluid-images/
*/
IMG, object, embed, {video
Max-width: 100%;
}

/ * IE 6 doesn't support max-width so 100% width by default * /.
. IE6 img {}
Width: 100%;
}

/*
Properties Grid Dreamweaver fluid
----------------------------------
DW-num-CLO-mobile: 4;
DW-num-CLO-Tablet: 7;
DW-num-OCOL-Office: 14;
DW-gutter-percentage: 25;

Inspiration of "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design

Golden by Joni Korpi grid system and
http://goldengridsystem.com/
*/

{.fluid}
Clear: both;
left margin: 0;
Width: 100%;
float: left;
display: block;
}

{.fluidList}
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}

/ * Mobile layout: 480px and below. */

{.gridContainer}
left margin: auto;
margin-right: auto;
Width: 86,45%;
padding-left: 2,275%;
padding-right: 2,275%;
Clear: none;
float: none;
font size: small;
}
#top {}
}
#top img {}
left margin: auto;
margin-right: auto;
display: block;
}
{#mainNav}
}
{#menuSystem}
list-style-type: none;
}
.menuItem {}
top of the margin: 2px;
margin-bottom: 2px;
padding-top: 1px;
padding-bottom: 1pk;
text-align: center;
color: #FFFFFF;
background-color: #051383;
border-radius: 5px;
Width: 100%;
left margin: 0;
Clear: both;
}
{.photois}
}
body p {}
do-family: Arial;
}
{.jonofigcaption}
make-style: italic;
Police-family: Garamond;
font size: small;
text-align: left;
}
body figcaption p {}
}
{motto}
Police-family: Garamond;
font size: large;
make-style: italic;
text-align: left;
}
.Text1 {}
}
. Header {}
do-family: Tahoma;
font-size: medium;
}
{.jonotext}
do-family: Arial;
text-align: justify;
}
.Text2 {}
do-family: Arial;
text-align: left;
}
{.footer1}
text-align: right;
do-family: Arial;
do-size: x-small;
}
{.footer2}
text-align: right;
Police-family: Garamond;
do-size: x-small;
}
{.footer3}
text-align: right;
do-family: Arial;
Police-weight: 900;
make-style: italic;
}
. gridContainer.clearfix. fluid.footer2 p img {}
}
{#jonominibutton}
left margin: 1px;
right margin: 1px;
padding-left: 1px;
padding-right: 1px;
}
#mainNav a {}
display: block;
text-decoration: none;
color: #FFFFFF;
}
#mainNav a: hover, #mainNav a: active, #mainNav one: {emphasis
background-color: #A3C3FF;
text-decoration: none;
color: #051383;
}

. gridContainer.clearfix #top img {}
padding-bottom: 5px;
padding-top: 5px;
}
UL {}
list-style-type: none;
}
{body
}
a: link {}

}
{.footer4}
do-family: Arial;
font size: small;

}
. gridContainer.clearfix. fluid.footer2 p an img {}
}
{.officearea}
}
.officearea img {}
vertical-align: bottom;
}
{.jonofooter4}
do-family: Arial;
do-size: x-small;
text-align: left;
}
.jonothumb img {}
vertical-align: baseline;
}
{.footer7}
do-family: Arial;
Police-weight: 900;
make-style: italic;
font size: small;
}
{.zeroMargin_mobile}
left margin: 0;
}
{.hide_mobile}
display: none;
}
#mainNav ul ul {}
display: none;
position: absolute;
}
#mainNav li: hover ul > ul {}
display: block;
}
#mainNav ul ul li {}
float: none;
text-align: center;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;


background-position: center
%;
}

#mainNav a: hover, a: active {}
}

/ * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */

@media only screen and (min-width: 481px) {}

{.gridContainer}
Width: 90.3428%;
padding-left: 1.3285;
padding-right: 1.3285;
Clear: none;
float: none;
left margin: auto;
}
#top {}
}
{#mainNav}
}
{#menuSystem}
}
.menuItem {}
Width: 11.7647%;
Clear: none;
margin left: 2.9411%;
}
{.photois}
}
.Text1 {}
}
.Text2 {}
}
{.footer1}
}
{.footer2}
}
{.footer3}
}
{.footer4}
}
{.officearea}
}
{.footer7}
}
{.hide_tablet}
display: none;
}
{.zeroMargin_tablet}
left margin: 0;
}
}

/ * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

@media only screen and (min-width: 769px) {}

{.gridContainer}
Width: 88.7142%;
Max-width: 1232px;
padding-left: 0,6428%;
padding-right: 0,6428%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
#top {}
}
{#mainNav}
}
{#menuSystem}
}
.menuItem {}
Width: 13.0434%;
Clear: none;
margin left: 1.4492%;
}
{.photois}
}
.Text1 {}
}
.Text2 {}
text-align: left;
}
{.footer1}
}
{.footer2}
}
{.footer3}
}
{.footer4}
}
{.officearea}
}
{.jonoboldarial}
Police-weight: 900;
do-family: Arial;
make-style: italic;
}
{.footer7}
}
{.zeroMargin_desktop}
left margin: 0;
}
{.hide_desktop}
display: none;
}

}

It's these types of different services, I should show up in the drop-down buttons. >

Drop-down lists that appear to move the mouse do not work on touchscreens because they do not have a mouse.  The current trend is to keep the navigation simple & simplified.  21 links dropdown under Services is going to be too expensive for mobile users.   Just keep the simple navigation with a link to the Services page you did and your users will have fewer problems with your site.

Either way, justified text links seem strange.  See screenshot.   You can see that.

Finally and most importantly, provide enough space between links to help mobile users.  Android recommended that links be 10mm high providing for easier faucet finger gestures.  When the links are stacked too close together, which makes it very difficult selecting the link desired without the aid of a stylus.

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Help with Hidden Drop Down lists in the subforms RBList

    I've created a form that contains 3 remote option button lists, each with hidden subforms that are unique in each button.

    Two of my RBLists and subforms work perfectly, showing the hidden options drop down and other fields as they should when a button is selected.

    However, RBList3 has the lists dropdown as user input fields only. Each subform hidden in RBList3 contains a menu drop down and a text box for instructions.

    I used the same javascript to hide/show the hidden fields when buttons are selected. All the settings seem to be upward. Here is a sample of my code:

    If (RBList3.F.rawValue! = 2)
    {
    This.Presence = 'hidden ';
    newsubform. Presence = "hidden";
    }

    another if (RBList3.F.rawValue == 2)
    {
    This.Presence = "visible";
    newsubform. Presence = "hidden";
    }

    Does anyone have suggestions for how make my Drop-Down lists in RBList3 show that lists functional Drop?

    I have attached the reference form.

    Code not woirk for E, F and G. I check if the user selects G if they do not, then they must chose one of two other options (which means that the rest of the logic is executed). If I understand the question is in the initial state of the EdgeDropDown2 objects.

    PanzDrawTxt, and

    EdgePanelChkBxTxt. If you set the initial value of invisible presence, then you will not need to change any code. You must do this for each object individually. Click on one of the objects and on the object palette click the tab field near the bottom of this tab is a drop-down list to set the initial value of presence. Set it to the invisible. Repeat for the other two objects.

    Paul

  • How to use spawning with a drop-down list and a table area

    Hello

    I have a form that I need to build pages.  As it is now, I have a table in document and a drop-down list box.  When a selection is made in the drop-down list box, the StateAmt field is filled with the table.  This set works fine now, but I need to be able to make this code work with pages having engineered and need a bit of help.

    It's my javascript document:

    var gState = new Array //Create a reference to a new array

    load the table with quantities for each State

    gState ['AL'] = 40

    gState ['AK'] = 40

    gState ["AR"] = 40

    gState ["z"] = 25

    gState ['CA'] = 25

    .. .and so on, I deleted the most to make the shorter script here

    It's my script custom shot to a combo box "gstate" (FYI, I've added the initials of the State in the tab options in combo box)

    var stateamt = this.getField ("G876. StateAmt')

    If (event.changeEx to gState)

    stateamt. Value = gState [event.changeEx]

    This works very well for one page, but when I add another page (model laid) nothing happens after you make a selection in the drop-down list box.  I don't know I need to edit the script due to spawning change the domain names on each page, but I don't know how.  I tried to rename the combo gState1 and using this script (which does not work)

    Fna var = event.target.name.split(".");

    var fp = fna.length > 1? "fna [0] +". ' ' + fna [1] + ". » : » « ;"

    var stateamt = this.getField(fp_+_"G876_StateAmt").name / / (this is G876. StateAmt in the original formula)

    var = this.getField(fp_+_"gState1").name //(this is gState GST on the original form)

    If (event.changeEx in GST)

    stateamt. Value = gst [event.changeEx]

    If anyone can help me with this, I would be very grateful.

    Thank you

    Lisa

    I fugured it myself. It works:

    Fna var = event.target.name.split(".");

    "var fp = fna.length > 1? fna [0] +". ' ' + fna [1] + ". » : » « ;"

    var stateamt = this.getField (fp + "G876_StateAmt")

    If (event.changeEx to gState)

    stateamt. Value = gState [event.changeEx]

    I didn't totally understand the script and trying to change the wrong part.  It is still using the gState table and I needed to change the text box to get the information in the table.

  • How the auto fill a field based on the drop-down list unless the specific item is selected

    Hi all

    My apologies if I posted this in in the wrong place, but I am new to these forums, JavaScript and Adobe LiveCycle.

    I am trying to build a form using LiveCycle Acrobat but have problems with the drop-down lists.

    Inititaly I just wanted to fill in the fields in a table based on a matching menu selection dropdown in another table.

    I used the following code and it worked fine:

    Workbook.Content.Table1.Row3.AppropriationDetails.Row4.Cell1::change - (JavaScript, client)

    fFrom var = xfa.resolveNodes ("Workbook.Content.Table1.Row3.AppropriationDetails [*]. Row4.cell1');

    OTF var = xfa.resolveNodes ("Workbook.Content.Table2.Row3.AppropriationDetails [*]. Row4.cell1");

    for (var i = 0; i < = fFrom.length - 1; i ++) {}

    fTo.item (i) .rawValue = fFrom.item (i) .boundItem (xfa.event.newText);

    }

    The problem is that now I want the code above works UNLESS one of the items in the drop-down list is enabled specifically in this case, I want the text box in the other table to display a message such as "Details of the entry in the field below.

    I tried to create an If Else statement using the following code:

    Workbook.Content.Table1.Row3.AppropriationDetails.Row4.Cell1::change - (JavaScript, client)

    fFrom var = xfa.resolveNodes ("Workbook.Content.Table1.Row3.AppropriationDetails [*]. Row4.cell1');

    OTF var = xfa.resolveNodes ("Workbook.Content.Table2.Row3.AppropriationDetails [*]. Row4.cell1");

    for (var i = 0; i < = fFrom.length - 1; i ++) {}

    If (fFrom.item (i) .rawvalue = "Option 3") {}

    fTo.item (i) .rawValue = "enter the details in the field below.

    }

    else {}

    fTo.item (i) .rawValue = fFrom.item (i) .boundItem (xfa.event.newText);

    }

    }

    The code now filled the field with "Enter the details in the field below" any item I select in the drop-down list.

    Your help is greatly appreciated.

    See you soon,.

    ozzy_q

    Hello

    You use .rawValue in the change event. This will cause problems because the selection of the users has not received .rawValue from the drop-down list at the time when the change event is triggered.

    Move your script as it should to the output of the dropdown event.

    Hope that helps,

    Niall

  • How can I sort alphabetically in the drop-down list in the Tools menu of Firefox?

    The Tools menu has a drop-down list, but the entries are not in alphabetical order. Options and a few individual add-ons/extensions appear in the list, but not in alphabetical order. It would be useful to them in alphabetical order in the list, however, I can't find any option to sort. Did I miss a hidden, built-in option for sorting? Is there an add-on may be providing a way to sort? Someone has an idea? I have not found anything this either in my research on the subject... just what is the sorting of bookmarks. But it's the combo of Tools menu I want to be able to twist. Anyone?

    There is no built-in opportunities to change the menus of the application. The easiest way to do this is by using the editor from Menu Add-on.

    Advanced users familiar with CSS can create a custom style sheet and apply it with Stylish.

  • The back button often responds with a drop down menu of the story rather than simply go back to the previous page. There used to be a small arrow for that, why did you do that?

    The back button often responds with a drop down menu of the story rather than simply go back to the previous page. There used to be a small arrow for that, why did you do that?

    When I left click on the back instead of the browser navigation back button, I go almost every time to get the list of previous browsing history or it will just doing nothing until I click on the new button. The history of combination of button "return" rather than a separate between the historical click of the buttons box is the problem. Combined with my arthritic fingers of aging that is. If I was as fast as I used to be I guess it wouldn't be a problem. I liked the separate history area. This action combination navigation / buttons story scenario is problematic. I'm fairly certain that if I find it quite disturbing to bring to your attention that there are others (old beards) in the same boat I am.

    Thanks for listening
    D

    Use one of the following methods to open the tab history list:

    • Right-click on the back or next button
    • Press and hold the left button of the mouse on the active back or forward button until the list opens

    You can watch this extension:

  • Fill the drop-down list in the SQL data source

    I have a data source that retrieves data from an sqlite database. How do I pass two areas of this query to a drop-down list on the page. I want to create a drop down list with the value and the text of this data source

    Hello

    To extract the values you need to wait for onDataLoaded. "data" parameter is a list of cards.

    An example of code for data access :

    http://supportforums.BlackBerry.com/T5/Cascades-development/SQLite-count-query/m-p/2477699#M27180

    http://supportforums.BlackBerry.com/T5/Cascades-development/DataSource-data-in-JavaScript/m-p/244171...

    To add an option to the menu drop-down:

    attachedObjects: [
      ComponentDefinition {
        id: optionFactory
        Option {
        }
      }
    ]
    
    ... to add an option:
    
    var newOption = optionFactory.createObject()
    newOption.text = 'Text to add' // or a variable fetched from data source//newOption.otherfields = ...
    dropdownId.add(newOption);
    
  • Impossible to delete previously selected items from the drop-down lists at the click of the button Reset on a page of the screen.

    Hello

    I'm unable to clear previously selected items from the drop-down lists at the click of the button Reset on a page of the screen. The code I did to clear the previous value when the click on the button Reset is as below.

    {} public void onReinitialize (ActionEvent actionEvent)

    System.out.println ("onReinitialize is called ::");

    UIComponent uiComp = actionEvent.getComponent ();

    If (uiComp is nothing)

    {

    otherwise we use the button that we linked to that bean

    uiComp = getButtonResetByBean ();

    _logger.info ("reset fields: buttonID =" + uiComp.getId ());

    }

    on the other

    {

    _logger.info ("reset fields: CompID =" + uiComp.getId ());

    }

    Pass the component inside the uniforms, UIXForm, UIXSubform, UIXRegion, UIXPopup, RichCarousel

    or RichPanelCollection that contains the components to reset

    getTextIDLOV () .setValue (null);

    ResetUtils.reset (uiComp);

    }

    ---

    Using this code Iam able to clear the entrance to the text box but can not clear previously selected items from the drop-down lists when the reset button is clicked

    Can anyone please help on this issue.

    It's simple, you can set GenerateIsNullClauseForBindVars = "false" in the viewCriteria who created in EmployeeView

    After doing that it will fill the list of employees only after the Department selection

    Again check the enclosed application

    Ashish

  • CC App drop-down list in the menu bar (Mac) completely blank!

    CC App drop-down list in the menu bar (Mac) completely blank! I tried to delete the opm.db file, logging in via the browser and change my password. Nothing works! By making the two above, I get a login screen in the fall to the bottom of the window, but at the time wherever I am connected, it becomes totally empty. I am running an iMac and OS 10.9.5 3.4Ghz i7. Can not work of the CC function without the content of this window, so the only way I can close the app is by restarting the computer. CC wants me Uninstaller uninstall ALL my applications from Adobe, which is not practical. All of the other CC users on the site here do not have this problem, so it does not appear to be linked to the firewall. Help would be appreciated!

    4.png

    Hi Matt,

    Please refer to the threads below where this issue has been addressed:

    Creative cloud is empty window why?

    Cloud Desktop App is empty?

    New application Cloud Creative unusable: it is empty!

    Re: Empty opening creative cloud app

    Kind regards

    Sheena

  • How to trigger a refresh of a drop-down list when the selection is changed

    Hello

    This is a general question of ExtendScript, but since I work with FM, I'll ask here first. I have a bit of a paradox here and I'm not sure of the best way to manage it.

    I have a dialog box with a drop-down list, where I want to refresh some controls when the user changes the selection in the list (dropdownList.onChange). This includes them refresh the content of the list itself. However, the problem is, whenever I try to update the content of the list, onChange triggers again. So, if I put the call to update box in the onChange handler, it will result an infinite loop, because my upgrade function fires onChange when it refreshes the list.

    Does anyone know a better methodology, where I can safely triggers a refresh of a drop-down list in the list's onChange event handler? I really wish that onChange was reserved for an action of the user only, or at least there is a property for this purpose.

    Russ

    Hi Fabio,.

    You can't "Refresh" a menu drop-down.

    But you can rebuild.

    You must do it "manually".

    As I do:

    1. I have a picture I want to show in the dropdownlist control.

    2. I have delete all children: myList.removeAll ();

    3 I have rebuild the list via mylist.add ("item", "myArray [index] in a for - loop.

    But if you know the exact position of the elements to remove or add, you can do so via splice()

  • Drop-down lists of the fill of the text fields on a different page from the drop-down list.

    Hi all

    I have a form with multiple pages. The first page contains a number of drop-down lists. These lists, drop-down list when the option is chosen, must complete a field text on another page. I can get the drop down menu to populate the text field when it is on the same page, but as soon as I move the text field to another page, the script does not work. Can anyone offer a solution? I used javascript on the changes to the scripts.

    Every time reference you the other object... so I guess in the code located on the DDlist.

    Paul

  • Fill the drop-down list on the duration box

    Hi all

    Please help me to fill in a drop-down list on the duration.
    vcclient_no: = FK_SPLIT (vcBuffer);
    vcpol_ref: = FK_SPLIT (vcBuffer);
    vcmake: = FK_SPLIT (vcBuffer);
    vcmodel: = FK_SPLIT (vcBuffer);
    vcchassis: = FK_SPLIT (vcBuffer);

    I need fill out the values of these variables to a drop-down list box.

    Take a look at the online help, there is a complete example.

  • How does one increase the number of entries in the drop-down list of the address bar?

    It seems that the number of entries in the drop-down list of the address bar is limited to twelve URLS. I would find it convenient that more than twelve years can be shown, but do not know how to increase the number.

    Increase or decrease browser.urlbar.maxRichResults using Subject: config

    NOTE: The FasterFox extension may affect the number of items displayed if you have it installed (addons > Extensions).

    If this answer solved your problem, please click 'Solved It' next to this response when connected to the forum.

  • What happened to the drop-down list of the previous pages on the back button? I see it in 'history', but it is slower to get to.

    There used to be a drop-down list on the back button, and I think that the forward stop button, too, so that I could jump to the previous page without paging a descendant both. Find my story now and clicking on a page are much slower.

    Use one of them to open the tab history list:

    • Right-click on the back or next button
    • Press and hold the left button of the mouse on the active back or forward button until the list opens

    You can watch this extension:

  • Width of drop-down list and the number of drop-down list values

    How to increase / decrease the width of a drop-down list on the screen of your interview? In addition, how you increase the number of menu options drop-down user, some of my options in drop-down list don't show up. This shows only 3 points:...

    For OPM 10.4:

    Increase the number of visible items in a drop-down list

    There are two options:

    1. make a regular drop-down list instead of a list of drop-down list box. Regular drop-down lists always display all items, regardless of the length of the list. To do this, set "enable-search-comboboxes = false" in the appearance.properties file. "

    2. increase in the search results max for the combo box in the file appearance.properties, for example 'search max-results = 20' (or another number as appropriate)

    See article OPM the User Guide for more details: http://docs.oracle.com/html/E54499_01/toc.htm#Interviews%20and%20flows/Customize_Web_Determinations.htm#Change4

    I have a vague memory that the increase in the width of the drop-down lists is a bit more tedious. I'll take a look and post here...

    See you soon,.

    Jasmine

Maybe you are looking for