Normal menu design question

(Pomster09) #1

Hi guys

 

Is there a way of adding a variable to my pages? I guess metadata would be an option, but is there a different option.

 

I'm creating a simple site which only has a few pages. My dilemma is I have bootstrap style icons in the menu, as well as text. In the desktop menu I'm only showing a "home" icon, but the mobile version I want to show each icon for each page. Is having the icon code in a metadata field the only way to do this?

 

Here's my Original HTML code, and starting Normal Menu code:

Home About Knowledge Centre Help Contact Visit the main website 
	  ################ Norman Menu Design So Far ####################
	  
<div class="right menu">		
  <MySource_AREA id_name="menu" design_area="menu_normal">
  	<MySource_SET name="settings.class.normal" value="item" />
  	<MySource_SET name="settings.class.current" value="active item" />
<MySource_ASSET>
  <a href="<MySource_PRINT var="asset_link" />" class="<MySource_PRINT var="settings.class" />">
     %asset_metadata_iconField% <MySource_PRINT var="asset_short_name" />
   </a>
</MySource_ASSET>
<MySource_DIVIDER></MySource_DIVIDER>
  </MySource_AREA> 
  </div>

Cheers

 

Wardy

(Peter McLeod) #2

Hi Wardy

 

If you are wanting to only show icons for all links in your mobile view - could you just add them for all and set a media query class to hide on smaller screen.

 

Eg if you are using Bootstrap you could use the responsive utility classes: http://getbootstrap.com/css/#responsive-utilities

 

Not sure if this is what you mean?

 

Thanks

Peter

(Pomster09) #3

Thanks Peter

 

I'm using semantic UI as the framework, and I have no problems writing the css to only display the content needed. In my sample to show to my client, I created two different menu's and just used simple media queries/css to display or hide the versions for desktop or mobile. In the squiz version I could probably get away with hard coding into the parse file as is. But I want to use a normal menu, and only use the one for both. Again I have no issue with displaying one or the other, the question was more around where to store the icon code "<i class="some icon code"></i>". The normal menu is picking up the page title, but it's not feasible to write those <i> tags into the page title field, and because each icon is different, then I need to attached those icon references to the page.

 

Ideas?

 

Cheers

(Bart Banda) #4

Yep, I've done this a few times. You basically store the icon value in a metadata field of the pages and then print it into the menu, so taking your example above you would do something like this:

<div class="right menu">		
  <MySource_AREA id_name="menu" design_area="menu_normal">
  	<MySource_SET name="settings.class.normal" value="item" />
  	<MySource_SET name="settings.class.current" value="active item" />
    <MySource_ASSET>
      <a href="<MySource_PRINT var="asset_link" />" class="<MySource_PRINT var="settings.class" />">
         <MySource_PRINT var="asset_metadata_iconField" /> <MySource_PRINT var="asset_short_name" />
       </a>
    </MySource_ASSET>
    <MySource_DIVIDER></MySource_DIVIDER>
  </MySource_AREA> 
  </div>

In the latest Matrix we have append and prepend modifiers so that we can conditionally print the <i> tag and only store the code of the icon in the metadata, for example I'm printing it like this:

<a href="<MySource_print var="asset_url" />"><MySource_print var="asset_metadata_func.page-icon^prepend_if:<i class=\'fa fa-^append_if:\'></i> " /><MySource_print var="asset_attribute_short_name" /></a>
(Pomster09) #5

Thanks Bart, the metadata solution works just fine. Your append and prepend modifiers look like they'd be a bit over my head, but definately worth a look one day.

 

Cheers guys