using 2 navigation.vm in one portal

[fatimah najla mohd abd aziz, geändert vor 8 Jahren.]

hi

i am currently develop new portal, i want to use 2 navigation.vm which the usage based on condition.

the condition that come in my mind are

if screen < 700px{

use navigation.vm }

else{
use navigation1.vm}

how do i apply this into liferay portal, this 2 navigation.vm have different condition which i want to apply the second navigation.vm into mobile look..

thanks,

[Samuel Kong, geändert vor 8 Jahren.]

Take a look at portal_normal.vm. You should see a line that imports navigation.vm. You'll need to replace this line with your custom code.

[fatimah najla mohd abd aziz, geändert vor 8 Jahren.]

Thanks,

but how to code this algorithm in portal_normal.vm so it can be read by liferay.


if screen < 700px{

use navigation.vm }

else{
use navigation1.vm}

[Andrew Jardine, geändert vor 8 Jahren.]

Not sure how you are going to do this to be honest. The include directive (for either ftl or vm) is processed on the server but you are trying to set the file that is included based on the USERS (client side) settings.

Front end is not my forte, but isn't this sort of thing normally handled use responsive design with CSS these days?

[Samuel Kong, geändert vor 8 Jahren.]

I apologize. Andrew is correct. What you'll need to do is include both navigation file. Then use JS to detect the size of the screen, and show/hide the appropriate navigation menu.

[Travis Cory, geändert vor 8 Jahren.]

You'd want to do this through CSS. If you use JS you are going to have issues with UX. The CSS will be loaded faster, so it will be a better UX.

[garrett culos, geändert vor 8 Jahren.]

You could try something like this:

<div class="hidden-lg">
	#parse ("$full_templates_path/navigation_small.vm")
</div>
<div class="hidden-sm">
	#parse ("$full_templates_path/navigation_big.vm")
</div>

SCSS:

.hidden-lg {
	@media screen and (max-width: 700px) {
		display:none;
	}
}
.hidden-sm {
	@media screen and (min-width: 699px) {
		display:none;
	}
}

Not sure if this follows best practices but It should give you a good starting point.